From 532f5094319f0083aed3ab7d23fe490eca5e6408 Mon Sep 17 00:00:00 2001 From: Daniel Petersen Date: Tue, 5 Nov 2024 10:21:06 -0800 Subject: [PATCH 1/5] font backup (monospace) added to textarea for offline use --- src/assets/style/components/program_input.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/style/components/program_input.scss b/src/assets/style/components/program_input.scss index d4c21fb..1653017 100644 --- a/src/assets/style/components/program_input.scss +++ b/src/assets/style/components/program_input.scss @@ -152,7 +152,7 @@ border-radius: 7.5px; border: 1px solid rgba(255, 255, 255, 0.10); color: #fdc667; - font-family: 'Roboto Mono'; + font-family: 'Roboto Mono', monospace; font-size: 12px; resize: none; padding: 12px; From e8565f059dda42b15a95b4bba82cb6a22d22b879 Mon Sep 17 00:00:00 2001 From: Daniel Petersen Date: Mon, 11 Nov 2024 19:20:29 -0800 Subject: [PATCH 2/5] unused css removed, css restructured --- src/assets/style/button_effects.scss | 240 ----------------- src/assets/style/components/navbar.scss | 28 +- .../style/components/program_input.scss | 243 ------------------ .../program_window/examples_tab.scss | 17 -- .../program_window/program_input.scss | 31 +++ src/assets/style/components/tooltip.scss | 67 +++++ src/assets/style/style.scss | 68 +---- src/components/footer.rs | 2 +- src/components/run_window/key_store_tab.rs | 2 +- 9 files changed, 122 insertions(+), 576 deletions(-) delete mode 100644 src/assets/style/button_effects.scss delete mode 100644 src/assets/style/components/program_input.scss delete mode 100644 src/assets/style/components/program_window/examples_tab.scss create mode 100644 src/assets/style/components/program_window/program_input.scss create mode 100644 src/assets/style/components/tooltip.scss diff --git a/src/assets/style/button_effects.scss b/src/assets/style/button_effects.scss deleted file mode 100644 index 98845be..0000000 --- a/src/assets/style/button_effects.scss +++ /dev/null @@ -1,240 +0,0 @@ -// *** bubbles *** -.run-button button { - $bubble-green: #00ff00; - $bubble-red: #ff0000; - position: relative; - - &:before, &:after{ - position: absolute; - content: ''; - display: block; - width: 140%; - height: 100%; - left: -20%; - transition: all ease-in-out 0.5s; - background-repeat: no-repeat; - transform: scaleY(1.4); - } - - &.bubble-animation-green { - &:before { - display: none; - top: -75%; - background-image: - radial-gradient(circle, $bubble-green 20%, transparent 20%), - radial-gradient(circle, transparent 20%, $bubble-green 20%, transparent 30%), - radial-gradient(circle, $bubble-green 20%, transparent 20%), - radial-gradient(circle, $bubble-green 20%, transparent 20%), - radial-gradient(circle, transparent 10%, $bubble-green 15%, transparent 20%), - radial-gradient(circle, $bubble-green 20%, transparent 20%), - radial-gradient(circle, $bubble-green 20%, transparent 20%), - radial-gradient(circle, $bubble-green 20%, transparent 20%), - radial-gradient(circle, $bubble-green 20%, transparent 20%); - background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%; - - display: block; - animation: topBubbles ease-in-out 0.75s forwards; - } - - &:after { - display: none; - bottom: -75%; - background-image: - radial-gradient(circle, $bubble-green 20%, transparent 20%), - radial-gradient(circle, $bubble-green 20%, transparent 20%), - radial-gradient(circle, transparent 10%, $bubble-green 15%, transparent 20%), - radial-gradient(circle, $bubble-green 20%, transparent 20%), - radial-gradient(circle, $bubble-green 20%, transparent 20%), - radial-gradient(circle, $bubble-green 20%, transparent 20%), - radial-gradient(circle, $bubble-green 20%, transparent 20%); - background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%; - - display: block; - animation: bottomBubbles ease-in-out 0.75s forwards; - } - } - &.bubble-animation-red { - &:before { - display: none; - top: -75%; - background-image: - radial-gradient(circle, $bubble-red 20%, transparent 20%), - radial-gradient(circle, transparent 20%, $bubble-red 20%, transparent 30%), - radial-gradient(circle, $bubble-red 20%, transparent 20%), - radial-gradient(circle, $bubble-red 20%, transparent 20%), - radial-gradient(circle, transparent 10%, $bubble-red 15%, transparent 20%), - radial-gradient(circle, $bubble-red 20%, transparent 20%), - radial-gradient(circle, $bubble-red 20%, transparent 20%), - radial-gradient(circle, $bubble-red 20%, transparent 20%), - radial-gradient(circle, $bubble-red 20%, transparent 20%); - background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%; - - display: block; - animation: topBubbles ease-in-out 0.75s forwards; - } - - &:after { - display: none; - bottom: -75%; - background-image: - radial-gradient(circle, $bubble-red 20%, transparent 20%), - radial-gradient(circle, $bubble-red 20%, transparent 20%), - radial-gradient(circle, transparent 10%, $bubble-red 15%, transparent 20%), - radial-gradient(circle, $bubble-red 20%, transparent 20%), - radial-gradient(circle, $bubble-red 20%, transparent 20%), - radial-gradient(circle, $bubble-red 20%, transparent 20%), - radial-gradient(circle, $bubble-red 20%, transparent 20%); - background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%; - - display: block; - animation: bottomBubbles ease-in-out 0.75s forwards; - } - } -} - -.copy-program { - position: absolute; - top: 80px; - right: 30px; -} - -@keyframes topBubbles { - 0% { - background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%; - opacity: 0; - } - 50% { - background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; - opacity: 1; - } - 100% { - background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%; - background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; - } -} - -@keyframes bottomBubbles { - 0% { - background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%; - opacity: 0; - } - 50% { - background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; - opacity: 1; - } - 100% { - background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%; - background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; - } -} - -// *** background flash *** -.flash-success { - animation: screen-flash-success .5s ease-in-out; -} - -.flash-fail { - animation: screen-flash-fail .5s ease-in-out; -} - -@keyframes screen-flash-success { - 0% {background-color: $body-background;} - 50%{ background-color: #002d00; } - 100%{background-color: $body-background;} -} - -@keyframes screen-flash-fail { - 0% {background-color: $body-background;} - 50%{ background-color: #3d0000; } - 100%{background-color: $body-background;} -} - -@keyframes run-button-success { - 0%, 100% { background-color: initial; } - 50% { background-color: MediumSeaGreen; } -} - -@keyframes run-button-failure { - 0%, 100% { background-color: initial; } - 50% { background-color: red; } -} - -.run-button { - &.success { - animation-name: run-button-success; - animation-duration: 0.5s; - } - - &.failure { - animation-name: run-button-failure; - animation-duration: 0.5s; - } -} - -/* Base Tooltip Styles */ -.tooltip { - position: relative; - display: inline-block; - - & .tooltip-text { - visibility: hidden; - width: 60px; - background-color: #555; - color: #fff; - text-align: center; - padding: 5px 0; - border-radius: 6px; - - /* Position the tooltip text */ - position: absolute; - z-index: 9999; - left: 50%; - margin-left: -30px; - - /* Fade in tooltip */ - opacity: 0; - transition: opacity 0.3s; - } - - & .tooltip-text::after { - content: ""; - position: absolute; - left: 50%; - margin-left: -5px; - border-width: 5px; - border-style: solid; - } - - &:hover .tooltip-text { - visibility: visible; - opacity: 1; - } -} - -/* Tooltip appears above affected element */ -.tooltip-above { - @extend .tooltip; - - & .tooltip-text { - bottom: 125%; - } - - & .tooltip-text::after { - top: 100%; - border-color: #555 transparent transparent transparent; - } -} - -/* Tooltip appears below affected element */ -.tooltip-below { - @extend .tooltip; - - & .tooltip-text { - top: 125%; - } - - & .tooltip-text::after { - bottom: 100%; - border-color: transparent transparent #555 transparent; - } -} diff --git a/src/assets/style/components/navbar.scss b/src/assets/style/components/navbar.scss index 7dcfcfa..6b6b698 100644 --- a/src/assets/style/components/navbar.scss +++ b/src/assets/style/components/navbar.scss @@ -29,21 +29,33 @@ } } + @keyframes run-button-success { + 0%, 100% { background-color: initial; } + 50% { background-color: MediumSeaGreen; } + } + + @keyframes run-button-failure { + 0%, 100% { background-color: initial; } + 50% { background-color: red; } + } + .run-button{ background: #b26e0f; margin-right: 2px; - } - - .share-button{ + &.success { + animation-name: run-button-success; + animation-duration: 0.5s; + } + + &.failure { + animation-name: run-button-failure; + animation-duration: 0.5s; + } } - .dropdown { - - .dropdown-button { - - } + .dropdown { .dropdown-content { display: none; // Hide dropdown by default position: absolute; diff --git a/src/assets/style/components/program_input.scss b/src/assets/style/components/program_input.scss deleted file mode 100644 index 1653017..0000000 --- a/src/assets/style/components/program_input.scss +++ /dev/null @@ -1,243 +0,0 @@ - -.program-input{ - background-color: $background-light; - padding: 30px; - border-radius: 7.5px; - - &-header{ - margin-bottom: 10px; - position: relative; - - .program-input-intro { - margin-right: 220px; - } - - h2 { - margin: 6px 0; - font-size: 28px; - font-style: normal; - font-weight: 700; - line-height: 24px; - margin-bottom: 14px; - } - - p{ - color: $text-grey; - font-size: 18px; - font-style: normal; - font-weight: 400; - line-height: normal; - } - } - - @media only screen and (max-width: 800px) { - &-header{ - display: flex; - flex-direction: column; - - .example-program-select-container{ - position: relative !important; - margin-top: 20px; - } - } - - .program-input-intro { - margin-right: 0 !important; - } - - } - - &-footer { - min-height: 80px; - padding-top: 30px; - position: relative; - - @media only screen and (max-width: 800px) { - display: flex; - flex-direction: column-reverse; - - .program-details { - margin-right: 0; - } - - .run-button{ - position: relative !important; - top: 0 !important; - margin-top: -10px; - margin-bottom: 20px; - } - } - } - - .run-button { - position: absolute; - top: 34px; - right: 0; - max-width: 100%; - z-index: 4; - - button { - display: flex; - width: 256px; - min-height: 47px; - padding: 16px 32px; - justify-content: center; - align-items: center; - gap: 8px; - color: #fff; - background: #b26e0f; - border: none; - font-family: 'rigid-square'; - font-size: 16px; - font-style: normal; - font-weight: 700; - line-height: 24px; - max-width: 100%; - cursor: pointer; - &:hover { - // background: #ea9606; - } - } - } - - .example-program-select-container{ - position: absolute; - bottom: 0; - right: 0; - z-index: 4; - max-width: 100%; - display: inline-block; - width: fit-content; - border-radius: 7.5px; - border: 1px solid #363636; - overflow: hidden; - - .example-program-select { - max-width: 100%; - height: 40px; - padding-left: 10px; - color: $text-grey; - background-color: $background-dark; - width: 200px; - border: none; - - -webkit-appearance: none; - -moz-appearance: none; - - &:focus-visible { - outline: none; - } - } - - i { - position: absolute; - right: 10px; - top: 8px; - font-weight: 100; - font-size: 26px; - color: $text-white; - pointer-events: none; - - &.loading { - font-size: 20px; - top: 10px; - right: 14px; - } - } - } - - &-field{ - width: 100%; - background-color: $background-dark; - border-radius: 7.5px; - border: 1px solid rgba(255, 255, 255, 0.10); - color: #fdc667; - font-family: 'Roboto Mono', monospace; - font-size: 12px; - resize: none; - padding: 12px; - &:focus-visible { - outline: none; - } - - scrollbar-color: $background-dark #424242; - scrollbar-width: thin; - } - - .rotate { - animation: rotate 1s infinite linear; - } - - @keyframes rotate { - from { transform: rotate(0deg); } - to { transform: rotate(360deg) } - } - - :disabled { - color: #999 !important; - background-color: #ccc !important; - cursor: default !important; - } - - .program-input-field-container{ - position: relative; - z-index: 4; - - .copy-holder { - position: absolute; - top: 10px; - right: 20px; - color: #ccc; - display: flex; - gap: 4px; - - .copy-button{ - border: 1px solid #b26e0f; - padding: 4px; - border-radius: 4px; - height: 34px; - width: 34px; - display: flex; - justify-content: center; - align-items: center; - background: #191C21; - - &:hover { - background: #b26e0f; - } - } - #copy-button-success{ - transition: .5s; - opacity: 0; - background: #191C21; - - padding: 6px 10px; - border: 1px solid #b26e0f; - border-radius: 4px; - } - .copy-show{ - opacity: 1 !important; - } - } - } - - #badger-canvas{ - position: absolute; - top: -686px; - left: -420px; - z-index: 2; - pointer-events: none; - - @media only screen and (max-width: 800px) { - top: -680px; - } - } - code{ - padding: .2em .4em; - margin: 0; - font-size: 85%; - white-space: break-spaces; - background-color: #505050; - border-radius: 3px; - } -} diff --git a/src/assets/style/components/program_window/examples_tab.scss b/src/assets/style/components/program_window/examples_tab.scss deleted file mode 100644 index 0241ccf..0000000 --- a/src/assets/style/components/program_window/examples_tab.scss +++ /dev/null @@ -1,17 +0,0 @@ -.program-title { - margin: 0 0 7px 0; - font-size: 28px; - font-style: normal; - font-weight: 700; - line-height: normal; -} - -.program-description { - color: $text-grey; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: normal; - word-break: break-word; - white-space: pre-wrap; -} diff --git a/src/assets/style/components/program_window/program_input.scss b/src/assets/style/components/program_window/program_input.scss new file mode 100644 index 0000000..1aafb63 --- /dev/null +++ b/src/assets/style/components/program_window/program_input.scss @@ -0,0 +1,31 @@ + +.program-input{ + background-color: $background-light; + padding: 30px; + border-radius: 7.5px; + + + &-field{ + width: 100%; + background-color: $background-dark; + border-radius: 7.5px; + border: 1px solid rgba(255, 255, 255, 0.10); + color: #fdc667; + font-family: 'Roboto Mono', monospace; + font-size: 12px; + resize: none; + padding: 12px; + &:focus-visible { + outline: none; + } + + scrollbar-color: $background-dark #424242; + scrollbar-width: thin; + } +} + +.copy-program { + position: absolute; + top: 80px; + right: 30px; +} \ No newline at end of file diff --git a/src/assets/style/components/tooltip.scss b/src/assets/style/components/tooltip.scss new file mode 100644 index 0000000..4d83e70 --- /dev/null +++ b/src/assets/style/components/tooltip.scss @@ -0,0 +1,67 @@ +/* Base Tooltip Styles */ +.tooltip { + position: relative; + display: inline-block; + + & .tooltip-text { + visibility: hidden; + width: 60px; + background-color: #555; + color: #fff; + text-align: center; + padding: 5px 0; + border-radius: 6px; + + /* Position the tooltip text */ + position: absolute; + z-index: 9999; + left: 50%; + margin-left: -30px; + + /* Fade in tooltip */ + opacity: 0; + transition: opacity 0.3s; + } + + & .tooltip-text::after { + content: ""; + position: absolute; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + } + + &:hover .tooltip-text { + visibility: visible; + opacity: 1; + } +} + +/* Tooltip appears above affected element */ +.tooltip-above { + @extend .tooltip; + + & .tooltip-text { + bottom: 125%; + } + + & .tooltip-text::after { + top: 100%; + border-color: #555 transparent transparent transparent; + } +} + +/* Tooltip appears below affected element */ +.tooltip-below { + @extend .tooltip; + + & .tooltip-text { + top: 125%; + } + + & .tooltip-text::after { + bottom: 100%; + border-color: transparent transparent #555 transparent; + } +} diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss index 8567c57..7e370bf 100644 --- a/src/assets/style/style.scss +++ b/src/assets/style/style.scss @@ -1,13 +1,12 @@ @import 'helpers.scss'; -@import 'button_effects.scss'; @import 'components/analysis.scss'; -@import 'components/program_input.scss'; +@import 'components/program_window/program_input.scss'; @import 'components/merkle.scss'; @import 'components/merkle_graph.scss'; -@import 'components/program_window/examples_tab.scss'; @import 'components/navbar.scss'; @import 'components/string_box.scss'; @import 'components/tab_content.scss'; +@import 'components/tooltip.scss'; * { box-sizing: border-box; @@ -42,64 +41,6 @@ p { line-height: 1.5; } -.container{ - max-width: 1160px; - width: 100%; - margin: 0px auto 50px auto; -} - -.page-header { - .header-icon { - width: 300px; - max-width: 100%; - margin-top: -30px; - margin-bottom: -30px; - - @media only screen and (max-width: 800px) { - margin-left: -20px; - width: 240px; - } - } -} - -.intro{ - margin-bottom: 80px; - - .intro-title { - font-size: 32px; - font-size: 48px; - font-style: normal; - font-weight: 700; - line-height: 60px; - color: #FFF; - text-align: center; - } - .intro-text { - color: #B5BDC2; - text-align: center; - font-size: 18px; - font-style: normal; - font-weight: 400; - line-height: 27px; - } - - @media only screen and (max-width: 800px) { - .intro-title { - padding: 0 20px; - text-align: center; - } - .intro-text { - padding: 0 20px; - text-align: center; - } - } -} - -@keyframes grow { - 0% {max-height: 0px; padding-top: 0px; padding-bottom: 0px} - 100% {max-height: 91px;} -} - .button-row { display: flex; @@ -110,11 +51,6 @@ p { } } -.button-col { - display: flex; - flex-direction: column; -} - .flat-button{ color: white; padding: 14px 16px; diff --git a/src/components/footer.rs b/src/components/footer.rs index 59ba610..2cf3f1e 100644 --- a/src/components/footer.rs +++ b/src/components/footer.rs @@ -3,7 +3,7 @@ use leptos::{component, view, IntoView}; #[component] pub fn Footer() -> impl IntoView { view! { -
+

Further Links

"🚀 " diff --git a/src/components/run_window/key_store_tab.rs b/src/components/run_window/key_store_tab.rs index ccca16d..a264ffe 100644 --- a/src/components/run_window/key_store_tab.rs +++ b/src/components/run_window/key_store_tab.rs @@ -352,7 +352,7 @@ fn SelectSignedData() -> impl IntoView {

Signed Data

-
+
} @@ -139,31 +146,37 @@ fn CopyPreimagesToClipboard() -> impl IntoView { view! {
-

- Preimages -

+
+

+ Preimages +

+ +
+ + +
+
+
- -
} diff --git a/src/components/run_window/key_store_tab.rs b/src/components/run_window/key_store_tab.rs index a264ffe..ed9d6fd 100644 --- a/src/components/run_window/key_store_tab.rs +++ b/src/components/run_window/key_store_tab.rs @@ -176,31 +176,37 @@ fn CopyPublicKeysToClipboard() -> impl IntoView {

"The keys and signatures that are currently generated by the web IDE are insecure."

-

- Public Keys -

+ +
+

+ Public Keys +

+ +
+ + +
+
- -
} @@ -226,31 +232,37 @@ fn CopySignaturesToClipboard() -> impl IntoView { view! {
-

- Signatures -

+
+

+ Signatures +

+ +
+ + +
+
+
- -
} From 798b324013a4db46ef9a69e88e1200e5fc462385 Mon Sep 17 00:00:00 2001 From: Daniel Petersen Date: Tue, 19 Nov 2024 11:34:52 -0800 Subject: [PATCH 5/5] mobile menu icons changed to font awesome --- src/assets/images/hamburger.svg | 5 ----- src/assets/images/hamburger_close.svg | 4 ---- src/assets/style/components/navbar.scss | 16 +++++++++++----- src/assets/style/components/tab_content.scss | 4 ---- src/components/program_window/mod.rs | 4 ++-- 5 files changed, 13 insertions(+), 20 deletions(-) delete mode 100644 src/assets/images/hamburger.svg delete mode 100644 src/assets/images/hamburger_close.svg diff --git a/src/assets/images/hamburger.svg b/src/assets/images/hamburger.svg deleted file mode 100644 index f2627bc..0000000 --- a/src/assets/images/hamburger.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/assets/images/hamburger_close.svg b/src/assets/images/hamburger_close.svg deleted file mode 100644 index f642d27..0000000 --- a/src/assets/images/hamburger_close.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/src/assets/style/components/navbar.scss b/src/assets/style/components/navbar.scss index ad5cae9..a9e694a 100644 --- a/src/assets/style/components/navbar.scss +++ b/src/assets/style/components/navbar.scss @@ -98,9 +98,12 @@ .hamburger{ display: none; position: absolute; - top: 12px; + top: 10px; right: 10px; - width: 34px; + + &:before{ + font-size: 34px; + } @media screen and (max-width: 1000px) { display: inline-block; @@ -110,9 +113,12 @@ .hamburger-close{ display: none; position: absolute; - top: 12px; - right: 10px; - width: 34px; + top: 10px; + right: 14px; + + &:before{ + font-size: 34px; + } @media screen and (max-width: 1000px) { display: inline-block; diff --git a/src/assets/style/components/tab_content.scss b/src/assets/style/components/tab_content.scss index 10ce8b0..33db3f1 100644 --- a/src/assets/style/components/tab_content.scss +++ b/src/assets/style/components/tab_content.scss @@ -84,10 +84,6 @@ font-weight: 700; line-height: normal; margin-bottom: 12px; - - &.has-buttons{ - - } } .tab-title-group{ diff --git a/src/components/program_window/mod.rs b/src/components/program_window/mod.rs index 58bbf23..ccbbb8b 100644 --- a/src/components/program_window/mod.rs +++ b/src/components/program_window/mod.rs @@ -40,9 +40,9 @@ pub fn ProgramWindow() -> impl IntoView { {move || if !mobile_open.get() { - view! { } + view! { } } else { - view! { } + view! { } }}