robonen/eulerian-cycle
1
0
Fork 0
mirror of https://github.com/robonen/eulerian-cycle.git synced 2026-03-20 10:54:46 +00:00
Code Activity

Update Design

Browse Source
This commit is contained in:
RomaFedoro
2021-12-12 01:23:53 +07:00
parent cb14d1ed7b
commit 1edefddbba
11 changed files with 449 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/css/creation.css
View File

@@ -31,6 +31,7 @@ body {
height: 100%;
background-color: var(--body-color);
color: var(--text-color);
padding: 0 64px;
}
html {
@@ -50,7 +51,7 @@ html {
max-width: 100%;
width: max-content;
display: flex;
margin: 44px 0 56px;
margin: auto;
}
.matrix {
@@ -158,6 +159,7 @@ html {
text-align: center;
font-family: "Formular";
}
.number input[type="number"]::-webkit-outer-spin-button,
.number input[type="number"]::-webkit-inner-spin-button {
display: none;
@@ -221,4 +223,4 @@ html {
.disabled-button {
opacity: 0.2;
cursor: auto;
}
}

342
src/assets/css/graph.css
View File

@@ -1,5 +1,3 @@
@charset "UTF-8";
:root {
--main-color: rgb(97 196 189);
--complement-color: rgb(46 105 120);
@@ -15,7 +13,7 @@
background-color: var(--body-color);
}
body > #app {
body>#app {
margin: 0;
font-family: "Formular";
height: 100%;
@@ -31,6 +29,7 @@ html {
.wrapper {
display: flex;
flex: 1;
padding: 0;
padding-right: 32px;
padding-left: 32px;
flex-direction: column;
@@ -43,6 +42,7 @@ html {
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.graph-cont,
@@ -52,16 +52,17 @@ html {
header {
width: 100%;
padding: 48px 0;
height: 60px;
margin: 48px 0 24px;
display: flex;
justify-content: space-between;
justify-content: center;
position: relative;
}
.header-step-cont {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 48px;
}
.header-step-description {
@@ -80,33 +81,35 @@ header {
width: 48px;
height: 20px;
margin: 0 12px;
background-image: url("~@/assets/icons/vector.svg");
background-image: url(~@/assets/icons/vector.svg);
}
.control-cont {
padding: 48px 0;
padding: 36px 0 48px;
display: flex;
justify-content: center;
align-items: center;
}
.menu-cont {
padding: 48px 64px;
.addition-cont {
padding: 48px 0;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
overflow-y: auto;
display: flex;
width: 34px;
overflow-y: auto;
}
.menu-cont__left {
padding-right: 0;
}
.menu-cont__right {
padding-left: 0;
.menu {
overflow-y: visible;
}
.step-cont,
.btn-cont {
.btn-cont,
.menu-cont {
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
margin: auto;
}
@@ -130,15 +133,6 @@ header {
margin-bottom: 0;
}
.header-close-button {
width: 32px;
height: 32px;
cursor: pointer;
transition: opacity 0.2s;
opacity: 0.4;
background-image: url("~@/assets/icons/close.svg");
}
.step::after {
content: "";
position: absolute;
@@ -168,15 +162,29 @@ header {
}
.dynamic-active-step::after {
-webkit-animation-name: next;
animation-name: next;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes next {
from {
background: #c1c1c1;
}
to {
background: #ff5c8e;
}
}
@keyframes next {
from {
background: #c1c1c1;
}
to {
background: #ff5c8e;
}
@@ -194,6 +202,7 @@ header {
cursor: pointer;
transition: 0.2s;
opacity: 0.6;
position: relative;
}
.main-control-button {
@@ -202,19 +211,19 @@ header {
}
#previous-step {
background-image: url("~@/assets/icons/previous-step.svg");
background-image: url(~@/assets/icons/previous-step.svg);
}
#next-step {
background-image: url("~@/assets/icons/next-step.svg");
background-image: url(~@/assets/icons/next-step.svg);
}
#play {
background-image: url("~@/assets/icons/play.svg");
background-image: url(~@/assets/icons/play.svg);
}
#pause {
background-image: url("~@/assets/icons/pause.svg");
background-image: url(~@/assets/icons/pause.svg);
}
.control-button:hover {
@@ -225,3 +234,274 @@ header {
opacity: 0.1;
cursor: auto;
}
.empty-graph-cont {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 0;
color: gray;
}
.render-area {
z-index: 1;
}
.inaccessible {
opacity: 0;
}
.adjacency_matrix-cont {
position: absolute;
background-color: #f3f3f3;
width: 100%;
height: 100%;
overflow-y: auto;
top: 0;
left: 0;
z-index: 4;
display: flex;
justify-content: center;
}
.adjacency_matrix {
padding: 48px 64px;
display: flex;
flex-direction: column;
align-items: center;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
}
.menu-icon {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 32px;
height: 32px;
margin-bottom: 20px;
cursor: pointer;
position: relative;
}
.menu-icon:hover {
opacity: 1;
}
.matrix-icon {
background-image: url(~@/assets/icons/matrix.svg);
}
.info-icon {
background-image: url(~@/assets/icons/info.svg);
}
.help-icon {
background-image: url(~@/assets/icons/help.svg);
}
.close-icon {
background-image: url(~@/assets/icons/close.svg);
width: 20px;
height: 20px;
opacity: 0.6;
transition: .2s;
}
.menu-icon:last-child {
margin-bottom: 0;
}
.adjacency_matrix-menu {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 52px;
}
.header {
font-size: 18px;
font-weight: 700;
margin-right: 36px;
}
.header-matrix {
margin-right: 12px;
}
.popup-cont {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
box-sizing: border-box;
overflow-y: auto;
display: flex;
padding: 48px 64px;
background: rgb(0 0 0 / 60%);
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.version {
color: gray;
font-size: 12px;
font-weight: 300;
margin-left: 4px;
}
.popup {
margin: auto;
padding: 32px 28px;
background: white;
border-radius: 6px;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
width: 480px;
}
.popup-text {
font-size: 14px;
line-height: 20px;
}
.popup-el {
margin-bottom: 20px;
}
p {
margin: 0;
margin-bottom: 8px;
}
.popup-el:last-child {
margin-bottom: 0;
}
.gray {
color: #b8b8b8;
font-weight: 500;
}
.menu-prompt, .prompt {
left: 100%;
position: absolute;
z-index: 6;
visibility: hidden;
height: 12px;
/* margin-top: -2px; */
line-height: 1;
font-size: 12px;
padding: 8px 12px;
color: rgb(255 255 255);
font-weight: 500;
background: rgb(56 58 63);
border-radius: 4px;
opacity: 0;
box-shadow: 0px 1px 5px 1px 0px 1px 5px 1px rgb(56 58 63 / 35%);
transition: .2s;
display: block;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.menu-prompt {
margin-left: 8px;
margin-top: 2px;
}
.menu-prompt::before {
content: "";
position: absolute;
display: block;
left: -14px;
top: 7px;
border: 8px solid;
border-color: transparent rgb(56 58 63) transparent transparent;
}
.prompt {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
transform: translate(-50%, 0);
left: 50%;
top: -100%;
margin: -6px auto;
}
.prompt::after {
content: "";
position: absolute;
display: block;
top: 100%;
left: 50%;
border: 8px solid;
border-color: rgb(56 58 63) transparent transparent transparent;
transform: translate(-50%, 0);
}
.menu-icon:hover .menu-prompt, .control-button:hover .prompt {
opacity: 1;
visibility: visible;
transition-delay: .5s;
}
.error {
background: rgb(255, 58, 58);
color: white;
display: flex;
padding: 12px 16px;
border-radius: 6px;
width: max-content;
align-items: center;
position: absolute;
z-index: 5;
box-shadow: 0px 1px 5px 1px rgb(56 58 63 / 15%);
}
.popup-el.popup-button-cont {
display: flex;
align-items: center;
justify-content: flex-end;
padding-top: 8px;
}
.popup-button {
padding: 6px 12px;
margin-right: 8px;
font-weight: 500;
font-size: 14px;
cursor: pointer;
}
.main-popup-button {
padding: 10px 14px;
border: 1px solid;
border-radius: 28px;
font-size: 14px;
cursor: pointer;
}
.hints {
user-select: none;
z-index: 0;
color: gray;
font-size: 14px;
}

2
src/assets/icons/close.svg
View File

@@ -1 +1 @@
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#330522;stroke-miterlimit:10;stroke-width:10px;}</style></defs><line class="cls-1" x1="21" y1="21" x2="79" y2="79"/><line class="cls-1" x1="21" y1="79" x2="79" y2="21"/></svg>
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#330522;stroke-miterlimit:10;stroke-width:6px;}</style></defs><line class="cls-1" x1="21" y1="21" x2="79" y2="79"/><line class="cls-1" x1="21" y1="79" x2="79" y2="21"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 313 B

After

Width:  |  Height:  |  Size: 312 B

1
src/assets/icons/help.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#330522;stroke-linecap:round;stroke-miterlimit:10;stroke-width:6px;}</style></defs><path class="cls-1" d="M76.49,35a26.5,26.5,0,0,0-53-1.62c-.28,4.84,2.62,11.15,5.12,15.62a26.89,26.89,0,0,1,3.46,13.13v.19a4.18,4.18,0,0,0,4.18,4.18H63.68a4.18,4.18,0,0,0,4.18-4.18h0A26.47,26.47,0,0,1,71.43,49C73.8,44.91,76.49,39.32,76.49,35Z"/><path class="cls-1" d="M37.41,76.5H61.56A4.43,4.43,0,0,1,66,80.93v2.76a7.81,7.81,0,0,1-7.81,7.81H40.8A7.81,7.81,0,0,1,33,83.69V80.93A4.43,4.43,0,0,1,37.41,76.5Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 634 B

1
src/assets/icons/info.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#330522;stroke-linecap:round;stroke-miterlimit:10;stroke-width:6px;}.cls-2{fill:#330522;}</style></defs><circle class="cls-1" cx="50" cy="50" r="40"/><path class="cls-2" d="M47.63,68.22a4.84,4.84,0,0,1-3.37-1.13,3.81,3.81,0,0,1-1.26-3,7,7,0,0,1,.15-1.29L47.48,41.2h7.2L50.41,62.41h3l-1.13,5.81Zm4.12-30a4.48,4.48,0,0,1-2.81-.72,2.38,2.38,0,0,1-.9-2,5.75,5.75,0,0,1,.11-1c.07-.38.13-.72.2-1a7.4,7.4,0,0,1,.47-1.34A3.55,3.55,0,0,1,49.69,31a4.57,4.57,0,0,1,1.44-.85,6.21,6.21,0,0,1,2.16-.33,4.48,4.48,0,0,1,2.81.72,2.37,2.37,0,0,1,.9,2,5.67,5.67,0,0,1-.1,1c-.07.38-.14.72-.21,1a7.09,7.09,0,0,1-.46,1.34A3.61,3.61,0,0,1,55.35,37a4.29,4.29,0,0,1-1.44.85A5.9,5.9,0,0,1,51.75,38.22Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 822 B

1
src/assets/icons/matrix.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#330522;stroke-linecap:round;stroke-miterlimit:10;stroke-width:6px;}</style></defs><rect class="cls-1" x="9.99" y="10" width="33.7" height="33.7" rx="3.43"/><rect class="cls-1" x="56.31" y="10" width="33.7" height="33.7" rx="3.43"/><rect class="cls-1" x="9.99" y="56.3" width="33.7" height="33.7" rx="3.43"/><rect class="cls-1" x="56.31" y="56.3" width="33.7" height="33.7" rx="3.43"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 529 B

2
src/assets/icons/next-step.svg
View File

@@ -1 +1 @@
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:8px;}</style></defs><path class="cls-1" d="M19.12,16.64V83.36a1.51,1.51,0,0,0,2.26,1.3L78.89,51.3a1.51,1.51,0,0,0,0-2.6L21.38,15.34A1.51,1.51,0,0,0,19.12,16.64Z"/><rect class="cls-1" x="77.88" y="25" width="3" height="50" rx="1.5" transform="translate(158.75 100) rotate(180)"/></svg>
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:6px;}</style></defs><path class="cls-1" d="M19.12,16.64V83.36a1.51,1.51,0,0,0,2.26,1.3L78.89,51.3a1.51,1.51,0,0,0,0-2.6L21.38,15.34A1.51,1.51,0,0,0,19.12,16.64Z"/><rect class="cls-1" x="77.88" y="25" width="3" height="50" rx="1.5" transform="translate(158.75 100) rotate(180)"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 464 B

After

Width:  |  Height:  |  Size: 464 B

2
src/assets/icons/pause.svg
View File

@@ -1 +1 @@
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:8px;}</style></defs><rect class="cls-1" x="15" y="8" width="21" height="84" rx="1.5"/><rect class="cls-1" x="64" y="8" width="21" height="84" rx="1.5"/></svg>
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:6px;}</style></defs><rect class="cls-1" x="15" y="8" width="21" height="84" rx="1.5"/><rect class="cls-1" x="64" y="8" width="21" height="84" rx="1.5"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 338 B

After

Width:  |  Height:  |  Size: 338 B

2
src/assets/icons/play.svg
View File

@@ -1 +1 @@
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:8px;}</style></defs><path class="cls-1" d="M22.06,9.81V90.19a1.8,1.8,0,0,0,2.71,1.56L94.05,51.56a1.8,1.8,0,0,0,0-3.12L24.77,8.25A1.8,1.8,0,0,0,22.06,9.81Z"/></svg>
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:6px;}</style></defs><path class="cls-1" d="M22.06,9.81V90.19a1.8,1.8,0,0,0,2.71,1.56L94.05,51.56a1.8,1.8,0,0,0,0-3.12L24.77,8.25A1.8,1.8,0,0,0,22.06,9.81Z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 343 B

After

Width:  |  Height:  |  Size: 343 B

2
src/assets/icons/previous-step.svg
View File

@@ -1 +1 @@
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:8px;}</style></defs><path class="cls-1" d="M80.88,83.36V16.64a1.51,1.51,0,0,0-2.26-1.3L21.11,48.7a1.51,1.51,0,0,0,0,2.6L78.62,84.66A1.51,1.51,0,0,0,80.88,83.36Z"/><rect class="cls-1" x="19.12" y="25" width="3" height="50" rx="1.5"/></svg>
<svg id="Слой_1" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none;stroke:#3d3d3d;stroke-miterlimit:10;stroke-width:6px;}</style></defs><path class="cls-1" d="M80.88,83.36V16.64a1.51,1.51,0,0,0-2.26-1.3L21.11,48.7a1.51,1.51,0,0,0,0,2.6L78.62,84.66A1.51,1.51,0,0,0,80.88,83.36Z"/><rect class="cls-1" x="19.12" y="25" width="3" height="50" rx="1.5"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 418 B

After

Width:  |  Height:  |  Size: 418 B