mirror of
https://github.com/seigler/dash-visualizer
synced 2025-07-27 09:46:09 +00:00
publish: Add ability to link to specific blocks as static paintings
generated from commit 4d20e056c9053e65789b5620af382bdc1d78b1a5
This commit is contained in:
parent
b9779c990d
commit
8fb32c1ba4
4 changed files with 158 additions and 49 deletions
34
bundle.css
34
bundle.css
|
@ -44,12 +44,17 @@ a {
|
|||
-ms-transform: translate(-50%,-50%);
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
@media (max-height: 77.5vw) {
|
||||
@media (max-height: 82.5vw) {
|
||||
.block:first-child {
|
||||
width: calc(100vh - 5vw);
|
||||
height: calc(100vh - 5vw);
|
||||
}
|
||||
}
|
||||
.block.solo {
|
||||
left: 50%;
|
||||
width: 95vmin;
|
||||
height: 95vmin;
|
||||
}
|
||||
.block {
|
||||
width: 15vw;
|
||||
height: 15vw;
|
||||
|
@ -63,16 +68,20 @@ a {
|
|||
.explorer-link {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: 1.9vmin;
|
||||
text-align: center;
|
||||
background-color: hsla(0, 0%, 100%, 0.5);
|
||||
color: transparent;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
font-size: 1.9vmin;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: hsla(0, 0%, 0%, 0.5);
|
||||
color: white;
|
||||
opacity: 0.5;
|
||||
font-size: 6vw;
|
||||
line-height: 0;
|
||||
}
|
||||
.block:hover .explorer-link {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
.paint {
|
||||
position: absolute;
|
||||
|
@ -107,6 +116,7 @@ a {
|
|||
}
|
||||
|
||||
#connectionStatus {
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
border-radius: 0 0 0 0.5em;
|
||||
border-width: 0 0 0.1em 0.1em;
|
||||
|
@ -127,11 +137,19 @@ a {
|
|||
content: 'Connecting...';
|
||||
color: black;
|
||||
}
|
||||
#connectionStatus.is-loading:before {
|
||||
content: 'Loading...';
|
||||
color: black;
|
||||
}
|
||||
#connectionStatus.is-connected:before {
|
||||
content: 'Connected';
|
||||
color: green;
|
||||
}
|
||||
#connectionStatus.is-connected {
|
||||
#connectionStatus.is-loaded:before {
|
||||
content: 'Loaded';
|
||||
color: green;
|
||||
}
|
||||
#connectionStatus.is-connected, #connectionStatus.is-loaded {
|
||||
-webkit-transition: -webkit-transform 0.5s;
|
||||
transition: -webkit-transform 0.5s;
|
||||
-o-transition: transform 0.5s;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue