From 5fdee5020fa8864f3abc2929565b0c43811dd6f4 Mon Sep 17 00:00:00 2001
From: msramalho <19508417+msramalho@users.noreply.github.com>
Date: Mon, 14 Mar 2022 14:42:02 +0100
Subject: [PATCH] minor UI improvements
---
src/components/Layout.js | 1 +
src/components/controls/BottomActions.js | 7 +-
src/scss/cover.scss | 574 ++++++++++++-----------
3 files changed, 307 insertions(+), 275 deletions(-)
diff --git a/src/components/Layout.js b/src/components/Layout.js
index bee4b4f..c667c49 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -295,6 +295,7 @@ class Dashboard extends React.Component {
left: checkMobile ? padding : "var(--toolbar-width)",
top: 0,
overflowY: "scroll",
+ textAlign: "justify"
};
if (checkMobile) {
diff --git a/src/components/controls/BottomActions.js b/src/components/controls/BottomActions.js
index c11ad9e..91e5a4a 100644
--- a/src/components/controls/BottomActions.js
+++ b/src/components/controls/BottomActions.js
@@ -2,7 +2,7 @@ import React from "react";
import SitesIcon from "../atoms/SitesIcon";
import CoverIcon from "../atoms/CoverIcon";
-import InfoIcon from "../atoms/InfoIcon";
+// import InfoIcon from "../atoms/InfoIcon";
function BottomActions(props) {
function renderToggles() {
@@ -16,20 +16,19 @@ function BottomActions(props) {
/>
) : null}
- ,
+ {/* ,
- ,
+ , */}
{props.features.USE_COVER ? (
) : null}
- ,
);
}
diff --git a/src/scss/cover.scss b/src/scss/cover.scss
index a89e387..f00cf91 100644
--- a/src/scss/cover.scss
+++ b/src/scss/cover.scss
@@ -1,311 +1,343 @@
.cover-container {
- position: absolute;
- top: -100%;
- left: 0;
- height: 100vh;
- background-color: black;
- width: 100%;
- opacity: 1;
- transition: top 0.4s ease;
- z-index: $loading-overlay + 1;
- overflow-y: auto;
- overflow-x: hidden;
- color: $offwhite;
-
- &.showing {
- top: 0;
+ position: absolute;
+ top: -100%;
left: 0;
- }
+ height: 100vh;
+ background-color: black;
+ width: 100%;
+ opacity: 1;
+ transition: top 0.4s ease;
+ z-index: $loading-overlay + 1;
+ overflow-y: auto;
+ overflow-x: hidden;
+ color: $offwhite;
+
+ &.showing {
+ top: 0;
+ left: 0;
+ }
}
.cover-header {
- position: fixed;
- bottom: 20px;
- left: 0;
- display: flex;
- width: 100vw;
-
- @media only screen and (max-width: 1200px) {
- position: inherit;
- }
-
- .cover-logo-container {
- padding: 20px 0 0 20px;
+ position: fixed;
+ bottom: 20px;
+ left: 0;
display: flex;
- &.minimized {
- }
- .cover-logo {
- transition: all 1s;
- width: 60px;
- height: 60px;
- }
- }
+ width: 100vw;
+
+ @media only screen and (max-width: 1200px) {
+ position: inherit;
+ }
- &.minimized {
- bottom: 150px;
- max-width: $toolbar-width;
- max-height: 30px;
- justify-content: center;
- align-items: center;
- flex-direction: column;
.cover-logo-container {
- padding: 5px;
+ padding: 20px 0 0 20px;
+ display: flex;
+
+ &.minimized {}
+
+ .cover-logo {
+ transition: all 1s;
+ width: 60px;
+ height: 60px;
+ }
}
- .cover-logo {
- width: 60px;
- height: 60px;
+
+ &.minimized {
+ bottom: 150px;
+ max-width: $toolbar-width;
+ max-height: 30px;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+
+ .cover-logo-container {
+ padding: 5px;
+ }
+
+ .cover-logo {
+ width: 60px;
+ height: 60px;
+ }
}
- }
}
.fullscreen-bg {
- &.hidden {
- top: -100%;
- }
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- // overflow: hidden;
- z-index: -100;
- background: #000000;
+ &.hidden {
+ top: -100%;
+ }
+
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ // overflow: hidden;
+ z-index: -100;
+ background: #000000;
}
.fullscreen-bg__video {
- position: relative;
- top: 0;
- left: -25vw;
- width: 150vw;
- height: 100vh;
- -webkit-filter: contrast(70%) brightness(70%) grayscale(100%);
- filter: contrast(70%) brightness(70%) grayscale(100%);
- @media only screen and (max-width: 992px) {
- display: none;
- }
+ position: relative;
+ top: 0;
+ left: -25vw;
+ width: 150vw;
+ height: 100vh;
+ -webkit-filter: contrast(70%) brightness(70%) grayscale(100%);
+ filter: contrast(70%) brightness(70%) grayscale(100%);
+
+ @media only screen and (max-width: 992px) {
+ display: none;
+ }
}
.default-cover-container {
- display: flex;
- justify-content: center;
- flex-direction: column;
- align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
}
.cover-container {
- font-size: 12pt;
- display: flex;
- flex-direction: column;
- max-height: 100%;
-
- hr,
- br {
- width: 100%;
- }
-
- .sidebar {
+ font-size: 12pt;
display: flex;
flex-direction: column;
- justify-content: space-around;
- align-items: space-around;
- position: fixed;
- left: 0;
- background-color: $offwhite;
- margin-top: 60px;
- min-height: calc(100% - 280px);
- max-height: calc(100% - 280px);
- min-width: 19%;
- max-width: 19%;
- color: black;
- .il-video-pill {
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- flex: 1;
- background-color: transparent;
- border-bottom: 5px solid black;
- transition: all 0.4s ease;
- &.explore {
- background-color: $yellow;
- }
- &.videos {
- background-color: blue;
- }
- &:hover {
- cursor: pointer;
- background-color: $darkwhite;
- color: white;
- }
- }
- }
+ max-height: 100%;
- .hero {
- min-width: 100%;
- min-height: 80px;
- margin: auto;
- display: flex;
- flex-direction: column;
- margin-bottom: 20px;
- margin-top: 60px;
- @media only screen and (max-width: 1200px) {
- min-height: 250px;
+ hr,
+ br {
+ width: 100%;
}
- .row {
- display: flex;
- flex: 1;
- flex-direction: row;
- @media only screen and (max-width: 1200px) {
- flex-direction: column;
- }
- justify-content: space-around;
- &.vertical {
- flex-direction: column;
- }
- .cell {
- border: 1px solid white;
+
+ .sidebar {
display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- flex: 1;
- background-color: $darkgrey;
- padding: 10px 0;
- transition: all 0.4s ease;
- letter-spacing: 2px;
- min-height: 40px;
- &.small {
- letter-spacing: inherit;
- font-size: 10pt;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: space-around;
+ position: fixed;
+ left: 0;
+ background-color: $offwhite;
+ margin-top: 60px;
+ min-height: calc(100% - 280px);
+ max-height: calc(100% - 280px);
+ min-width: 19%;
+ max-width: 19%;
+ color: black;
+
+ .il-video-pill {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ flex: 1;
+ background-color: transparent;
+ border-bottom: 5px solid black;
+ transition: all 0.4s ease;
+
+ &.explore {
+ background-color: $yellow;
+ }
+
+ &.videos {
+ background-color: blue;
+ }
+
+ &:hover {
+ cursor: pointer;
+ background-color: $darkwhite;
+ color: white;
+ }
}
- &.plain {
- min-height: 10px;
- background-color: black;
- letter-spacing: 1px;
- @media only screen and (max-width: 1200px) {
- min-height: 100px;
- }
- }
- &.yellow {
- color: black !important;
- background-color: $yellow;
- }
- &:hover {
- cursor: pointer;
- background-color: $darkwhite;
- color: white;
- }
- @media only screen and (max-width: 1200px) {
- min-height: 100px;
- }
- }
- }
- }
- .cover-content {
- display: flex;
- flex-direction: column;
- max-width: 600px;
- overflow-y: auto;
- overflow-x: hidden;
- padding-bottom: 10em;
- h1,
- h2,
- h3,
- h4,
- h5 {
- text-align: center;
- }
- h1 {
- margin-bottom: -15px;
- margin-top: 30px;
- }
- h5 {
- margin-top: -15px;
}
- .md-container {
- width: 100%;
- overflow-wrap: break-word;
- // white-space: pre-line;
-
- ul {
- list-style: none;
- }
-
- li::before {
- content: "* ";
- }
- }
-
- // mobile styles, remove overlay buttons
- @media only screen and (max-width: 1200px) {
- font-size: 22pt !important;
- max-width: 100vw;
- padding: 0 40px 80px 40px;
- margin-bottom: 0;
- }
-
- .verify-tabs {
- background-color: $yellow;
- color: black;
- display: flex;
- flex-direction: column;
-
- .v-tab {
- display: flex;
+ .hero {
+ min-width: 100%;
+ min-height: 80px;
margin: auto;
- justify-content: center;
- align-content: center;
- flex: 1;
- }
- }
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 20px;
+ margin-top: 60px;
- .il-cover-verification-container {
- display: flex;
- flex-direction: column;
-
- .il-cover-verification {
- .il-video {
- border-radius: 1em;
- background-color: rgba(240, 240, 240, 0.5);
+ @media only screen and (max-width: 1200px) {
+ min-height: 250px;
}
- }
- }
- }
- _::-webkit-full-page-media,
- _:future,
- :root .cover-content {
- max-width: auto;
- }
+ .row {
+ display: flex;
+ flex: 1;
+ flex-direction: row;
+
+ @media only screen and (max-width: 1200px) {
+ flex-direction: column;
+ }
+
+ justify-content: space-around;
+
+ &.vertical {
+ flex-direction: column;
+ }
+
+ .cell {
+ border: 1px solid white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ flex: 1;
+ background-color: $darkgrey;
+ padding: 10px 0;
+ transition: all 0.4s ease;
+ letter-spacing: 2px;
+ min-height: 40px;
+
+ &.small {
+ letter-spacing: inherit;
+ font-size: 10pt;
+ }
+
+ &.plain {
+ min-height: 10px;
+ background-color: black;
+ letter-spacing: 1px;
+
+ @media only screen and (max-width: 1200px) {
+ min-height: 100px;
+ }
+ }
+
+ &.yellow {
+ color: black !important;
+ background-color: $yellow;
+ }
+
+ &:hover {
+ cursor: pointer;
+ background-color: $darkwhite;
+ color: white;
+ }
+
+ @media only screen and (max-width: 1200px) {
+ min-height: 100px;
+ }
+ }
+ }
+ }
+
+ .cover-content {
+ display: flex;
+ flex-direction: column;
+ max-width: 600px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding-bottom: 10em;
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5 {
+ text-align: center;
+ }
+
+ h1 {
+ margin-bottom: -15px;
+ margin-top: 30px;
+ }
+
+ h5 {
+ margin-top: -15px;
+ }
+
+ .md-container {
+ width: 100%;
+ overflow-wrap: break-word;
+ // white-space: pre-line;
+
+ ul {
+ list-style: none;
+ }
+
+ li::before {
+ content: "* ";
+ }
+
+ p {
+ text-align: justify;
+ }
+ }
+
+ // mobile styles, remove overlay buttons
+ @media only screen and (max-width: 1200px) {
+ font-size: 22pt !important;
+ max-width: 100vw;
+ padding: 0 40px 80px 40px;
+ margin-bottom: 0;
+ }
+
+ .verify-tabs {
+ background-color: $yellow;
+ color: black;
+ display: flex;
+ flex-direction: column;
+
+ .v-tab {
+ display: flex;
+ margin: auto;
+ justify-content: center;
+ align-content: center;
+ flex: 1;
+ }
+ }
+
+ .il-cover-verification-container {
+ display: flex;
+ flex-direction: column;
+
+ .il-cover-verification {
+ .il-video {
+ border-radius: 1em;
+ background-color: rgba(240, 240, 240, 0.5);
+ }
+ }
+ }
+ }
+
+ _::-webkit-full-page-media,
+ _:future,
+ :root .cover-content {
+ max-width: auto;
+ }
}
.cover-footer {
- &.disabled {
- display: none;
- }
- position: fixed;
- bottom: 0;
- min-height: 150px;
- min-width: 100%;
- padding: 10px;
- background-color: black;
- display: flex;
- justify-content: center;
- .il-cover-button {
+ &.disabled {
+ display: none;
+ }
+
+ position: fixed;
+ bottom: 0;
+ min-height: 150px;
+ min-width: 100%;
+ padding: 10px;
+ background-color: black;
display: flex;
justify-content: center;
- align-items: center;
- min-width: 300px;
- max-height: 80px;
- margin-top: 30px;
- background-color: $offwhite;
- color: black;
- transition: all 0.3s ease;
- &:hover {
- cursor: pointer;
- background-color: darken($offwhite, 30%);
- color: black;
+
+ .il-cover-button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-width: 300px;
+ max-height: 80px;
+ margin-top: 30px;
+ background-color: $offwhite;
+ color: black;
+ transition: all 0.3s ease;
+
+ &:hover {
+ cursor: pointer;
+ background-color: darken($offwhite, 30%);
+ color: black;
+ }
}
- }
-}
+}
\ No newline at end of file