From 42aad35b0790cad8860aa0d0520ea30b6935449d Mon Sep 17 00:00:00 2001 From: Nikolay Yurchenko Date: Mon, 1 Apr 2019 14:24:45 +0300 Subject: [PATCH] Moved templates and styles for Login, Register and Navigation (#1624) --- .../src/components/header/AccountDropdown.vue | 4 +- .../src/components/header/Header.vue | 5 - .../components/navigation/NavigationArea.vue | 151 +---- .../components/navigation/navigationArea.html | 45 ++ .../components/navigation/navigationArea.scss | 133 ++++ web/satellite/src/router/index.ts | 4 +- web/satellite/src/views/Login.vue | 389 ------------ web/satellite/src/views/Register.vue | 571 ------------------ web/satellite/src/views/login/Login.vue | 72 +++ web/satellite/src/views/login/login.html | 53 ++ web/satellite/src/views/login/login.scss | 478 +++++++++++++++ web/satellite/src/views/register/Register.vue | 139 +++++ .../src/views/register/register.html | 98 +++ .../src/views/register/register.scss | 413 +++++++++++++ 14 files changed, 1440 insertions(+), 1115 deletions(-) create mode 100644 web/satellite/src/components/navigation/navigationArea.html create mode 100644 web/satellite/src/components/navigation/navigationArea.scss delete mode 100644 web/satellite/src/views/Login.vue delete mode 100644 web/satellite/src/views/Register.vue create mode 100644 web/satellite/src/views/login/Login.vue create mode 100644 web/satellite/src/views/login/login.html create mode 100644 web/satellite/src/views/login/login.scss create mode 100644 web/satellite/src/views/register/Register.vue create mode 100644 web/satellite/src/views/register/register.html create mode 100644 web/satellite/src/views/register/register.scss diff --git a/web/satellite/src/components/header/AccountDropdown.vue b/web/satellite/src/components/header/AccountDropdown.vue index 7d75332eb..ecf1ab613 100644 --- a/web/satellite/src/components/header/AccountDropdown.vue +++ b/web/satellite/src/components/header/AccountDropdown.vue @@ -83,7 +83,7 @@ export default class ProjectSelectionDropdown extends Vue { .account-dropdown-choice-container { position: absolute; top: 9vh; - left: 0px; + left: -70px; border-radius: 4px; padding: 10px 0px 10px 0px; box-shadow: 0px 4px rgba(231, 232, 238, 0.6); @@ -132,4 +132,4 @@ export default class ProjectSelectionDropdown extends Vue { text-decoration: none; outline: none; } - \ No newline at end of file + diff --git a/web/satellite/src/components/header/Header.vue b/web/satellite/src/components/header/Header.vue index ad91d7b11..ed524a87f 100644 --- a/web/satellite/src/components/header/Header.vue +++ b/web/satellite/src/components/header/Header.vue @@ -21,11 +21,6 @@ import AccountButton from './AccountButton.vue'; @Component( { - methods: { - onLogoClick: function (): void { - location.reload(); - } - }, components: { ProjectSelectionArea, NewProjectArea, diff --git a/web/satellite/src/components/navigation/NavigationArea.vue b/web/satellite/src/components/navigation/NavigationArea.vue index d5cf6ca23..0c4fd3c84 100644 --- a/web/satellite/src/components/navigation/NavigationArea.vue +++ b/web/satellite/src/components/navigation/NavigationArea.vue @@ -1,44 +1,7 @@ // Copyright (C) 2019 Storj Labs, Inc. // See LICENSE for copying information. - + - + diff --git a/web/satellite/src/components/navigation/navigationArea.html b/web/satellite/src/components/navigation/navigationArea.html new file mode 100644 index 000000000..106721d4d --- /dev/null +++ b/web/satellite/src/components/navigation/navigationArea.html @@ -0,0 +1,45 @@ + + + +
+
+ + +
+
+

{{navItem.label}}

+
+
+ + + + +
+
+
+ +
+
+ Satellite: + Mars +
+ +
diff --git a/web/satellite/src/components/navigation/navigationArea.scss b/web/satellite/src/components/navigation/navigationArea.scss new file mode 100644 index 000000000..2436c1a67 --- /dev/null +++ b/web/satellite/src/components/navigation/navigationArea.scss @@ -0,0 +1,133 @@ +// Copyright (C) 2019 Storj Labs, Inc. +// See LICENSE for copying information. + +.navigation-area { + position: relative; + min-width: 280px; + max-width: 280px; + height: 100vh; + left: 0; + background-color: #fff; + padding-top: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + + &__logo { + display: flex; + flex-direction: row; + align-items: center; + cursor: pointer; + margin-bottom: 50px; + margin-left: 60px; + + &__img { + width: 54px; + height: 60px; + } + + &__text { + margin-left: 12px; + width: 69px; + height: 16px; + } + } + + &__satellite { + text-align: center; + margin-bottom: 100px; + + &__span_title { + color: #354049; + opacity: 0.41; + font-family: 'font_regular'; + line-height: 21px; + font-size: 16px; + } + + &__span_name { + color: #354049; + font-family: 'font_medium'; + line-height: 21px; + font-size: 16px; + margin-left: 5px; + } + } + + &__item-container { + height: 70px; + padding-left: 60px; + border-left: 3px solid transparent; + display: flex; + justify-content: flex-start; + align-items: center; + &.router-link-active, + &:hover { + border-left: 3px solid #2683FF; + .svg path:not(.white) { + fill: #2683FF !important; + } + } + + &__link-container { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + h1 { + font-family: 'font_medium'; + font-size: 16px; + line-height: 23px; + color: #354049; + margin-left: 15px; + } + + &__add-button { + margin-left: 40px; + background-color: transparent; + + &:hover { + svg { + border-radius: 50px; + box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4); + } + } + } + } + } +} + +a { + text-decoration: none; + outline: none; +} + +@media screen and (max-width: 1024px) { + .navigation-area { + width: 80px; + max-width: 80px; + min-width: 80px; + + &__logo { + margin-left: 20px; + } + + &__logo__text { + display: none; + } + + &__item-container { + padding-left: 26px; + + &__link-container { + h1 { + display: none; + } + + &__add-button { + display: none; + } + } + } + } +} diff --git a/web/satellite/src/router/index.ts b/web/satellite/src/router/index.ts index 86a1f35e7..1fad5110c 100644 --- a/web/satellite/src/router/index.ts +++ b/web/satellite/src/router/index.ts @@ -4,8 +4,8 @@ import Vue from 'vue'; import Router from 'vue-router'; import ROUTES from '@/utils/constants/routerConstants'; -import Login from '@/views/Login.vue'; -import Register from '@/views/Register.vue'; +import Login from '@/views/login/Login.vue'; +import Register from '@/views/register/Register.vue'; import Dashboard from '@/views/Dashboard.vue'; import AccountArea from '@/components/account/AccountArea.vue'; import ProjectDetails from '@/components/project/ProjectDetailsArea.vue'; diff --git a/web/satellite/src/views/Login.vue b/web/satellite/src/views/Login.vue deleted file mode 100644 index 66eb56fe3..000000000 --- a/web/satellite/src/views/Login.vue +++ /dev/null @@ -1,389 +0,0 @@ -// Copyright (C) 2019 Storj Labs, Inc. -// See LICENSE for copying information. - - - - - - diff --git a/web/satellite/src/views/Register.vue b/web/satellite/src/views/Register.vue deleted file mode 100644 index 05122814f..000000000 --- a/web/satellite/src/views/Register.vue +++ /dev/null @@ -1,571 +0,0 @@ -// Copyright (C) 2019 Storj Labs, Inc. -// See LICENSE for copying information. - - - - - - - diff --git a/web/satellite/src/views/login/Login.vue b/web/satellite/src/views/login/Login.vue new file mode 100644 index 000000000..352e6b19d --- /dev/null +++ b/web/satellite/src/views/login/Login.vue @@ -0,0 +1,72 @@ +// Copyright (C) 2019 Storj Labs, Inc. +// See LICENSE for copying information. + + + + + + diff --git a/web/satellite/src/views/login/login.html b/web/satellite/src/views/login/login.html new file mode 100644 index 000000000..bdfc63fda --- /dev/null +++ b/web/satellite/src/views/login/login.html @@ -0,0 +1,53 @@ + + + +
+
+ +
+ + +
diff --git a/web/satellite/src/views/login/login.scss b/web/satellite/src/views/login/login.scss new file mode 100644 index 000000000..ed4d87eed --- /dev/null +++ b/web/satellite/src/views/login/login.scss @@ -0,0 +1,478 @@ +// Copyright (C) 2019 Storj Labs, Inc. +// See LICENSE for copying information. + +.login-container { + position: fixed; + width: 100%; + height: 100%; + left: 0; + top: 0; + z-index: 10; + background-size: contain; + display: flex; + justify-content: flex-start; + flex-direction: column; + align-items: flex-start; + padding: 60px 0px 0px 104px; + background-image: url("../../../static/images/Background.png"); + background-repeat: no-repeat; + background-size: auto; + + &__wrapper { + min-width: 50%; + height: 86vh; + } + + &__header { + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: row; + width: 100%; + } + + &__logo { + cursor: pointer; + width: 139px; + height: 62px; + } + + &__register-button { + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; + border-radius: 6px; + border: 1px solid white; + cursor: pointer; + width: 160px; + height: 48px; + + p { + font-family: 'font_bold'; + font-size: 14px; + line-height: 19px; + margin-block-start: 0; + margin-block-end: 0; + color: white; + } + + &:hover { + background-color: white; + + p { + color: #2683FF; + } + } + } +} + +.planet { + position: absolute; + top: -161px; + right: calc(100vw - 2200px); + z-index: -100; +} + +.login-area-wrapper { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: flex-end; +} + +.login-area { + background-color: transparent; + width: 620px; + border-radius: 6px; + display: flex; + justify-content: center; + flex-direction: column; + align-items: flex-start; + padding-bottom: 50px; + + &__title-container { + height: 48px; + display: flex; + justify-content: space-between; + align-items: flex-end; + flex-direction: row; + margin-bottom: 20px; + width: 100%; + + h1 { + font-family: 'font_bold'; + font-size: 22px; + color: white; + line-height: 27px; + margin-block-start: 0; + margin-block-end: 0; + } + + p { + font-family: 'font_regular'; + font-size: 16px; + color: white; + line-height: 21px; + margin-block-start: 0; + margin-block-end: 0; + + b { + font-family: 'font_bold'; + margin-left: 7px; + } + } + } + + &__password-input { + margin-top: 22px; + } + + &__submit-area { + display: flex; + justify-content: space-between; + flex-direction: row; + align-items: center; + width: 100%; + margin-top: 22px; + + &__login-button { + display: flex; + align-items: center; + justify-content: center; + background-color: #2683FF; + border-radius: 6px; + cursor: pointer; + width: 160px; + height: 48px; + box-shadow: 0px 16px 24px #3A54DF; + + p { + font-family: 'font_bold'; + font-size: 14px; + line-height: 19px; + margin-block-start: 0; + margin-block-end: 0; + color: white; + } + + &:hover { + box-shadow: none; + } + } + } + + &__info-area { + width: 100%; + height: 42px; + margin-top: 300px; + display: flex; + align-items: flex-end; + justify-content: flex-start; + flex-direction: row; + + p { + font-family: 'font_regular'; + font-size: 12px; + line-height: 18px; + text-align: center; + text-decoration: none; + color: white; + margin-block-start: 0; + margin-block-end: 0; + } + + a { + font-family: 'font_regular'; + font-size: 15px; + line-height: 18px; + text-align: center; + text-decoration: none; + color: white; + margin-block-start: 0; + margin-block-end: 0; + } + + &__signature { + margin-right: 50px; + } + + &__terms { + margin-right: 35px; + } + } + + &__login-button.container { + display: block; + text-align: center; + } + + &__navigation-area { + margin-top: 24px; + width: 100%; + height: 48px; + display: flex; + justify-content: center; + flex-direction: row; + align-items: center; + + &__nav-link { + font-family: 'font_regular'; + font-size: 14px; + line-height: 20px; + height: 48px; + text-align: center; + padding-left: 15px; + padding-right: 15px; + min-width: 140px; + text-decoration: none; + color: white; + + .bold { + font-family: 'font_medium'; + } + } + } +} + +.loading-overlay { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + top: 0; + left: 0; + right: 0; + left: 0; + height: 100vh; + width: 0; + z-index: 100; + background-color: rgba(134, 134, 148, 0.7); + visibility: hidden; + opacity: 0; + -webkit-transition: all 0.5s linear; + -moz-transition: all 0.5s linear; + -o-transition: all 0.5s linear; + transition: all 0.5s linear; + + &__logo { + width: 240px; + height: 110px; + z-index: 200; + } +} + +.loading-overlay.active { + width: 100vw; + visibility: visible; + opacity: 1; +} + +@media screen and (max-width: 1700px) { + .planet { + right: calc(100vw - 2000px); + } +} + +@media screen and (max-width: 1450px) { + .planet { + right: calc(100vw - 1850px); + } +} + +@media screen and (max-width: 1250px) { + .planet { + right: calc(100vw - 1700px); + } +} + +@media screen and (max-width: 750px) { + .login-container { + padding: 60px 20px 20px 20px; + + &__wrapper { + min-width: 95%; + } + } + .login-area { + width: 100%; + + &__info-area { + &__signature { + margin-right: 15px; + } + + &__terms { + margin-right: 10px; + } + } + } +} + +@media only screen and (max-width: 420px) { + .login-container { + padding: 40px 15px 50px 15px; + + &__wrapper { + width: 315px; + } + + &__header { + width: 95%; + } + + &__register-button { + width: 130px; + height: 40px; + + p { + font-size: 12px; + line-height: 16px; + } + } + } + .planet { + display: none; + } + .login-area-wrapper { + justify-content: flex-start; + padding-top: 20px; + } + .login-area { + width: 96%; + + &__title-container { + + h1 { + font-size: 18px; + line-height: 21px; + } + + p { + font-size: 13px; + line-height: 21px; + } + } + + &__submit-area { + h3 { + font-size: 14px; + line-height: 21px; + } + } + + &__info-area { + margin-top: 200px; + font-size: 10px; + + &__signature { + margin-right: 30px; + font-size: 10px !important; + } + + &__terms { + margin-right: 10px; + font-size: 10px !important; + } + + &__help { + font-size: 10px !important; + } + } + } +} + +@media only screen and (max-width: 340px) { + .login-container { + padding: 40px 15px 50px 15px; + + &__wrapper { + width: 250px; + } + + &__header { + width: 95%; + } + + &__register-button { + width: 100px; + height: 35px; + + p { + font-size: 10px; + line-height: 13px; + } + } + } + .login-area-wrapper { + padding-top: 20px; + justify-content: flex-start; + } + .login-area { + width: 92%; + + &__title-container { + + h1 { + font-size: 18px; + line-height: 21px; + } + + p { + font-size: 13px; + line-height: 21px; + } + } + + &__submit-area { + h3 { + font-size: 14px; + line-height: 21px; + } + } + + &__info-area { + margin-top: 100px; + font-size: 10px; + + &__signature { + margin-right: 30px; + font-size: 10px !important; + } + + &__terms { + margin-right: 10px; + font-size: 10px !important; + } + + &__help { + font-size: 10px !important; + } + } + } +} + +@media screen and (max-height: 850px) { + .login-area { + &__info-area { + margin-top: 200px; + } + } +} + +@media screen and (max-height: 700px) { + .login-area { + &__info-area { + margin-top: 150px; + } + } +} + +@media screen and (max-height: 610px) { + .login-area { + &__info-area { + margin-top: 100px; + } + } +} diff --git a/web/satellite/src/views/register/Register.vue b/web/satellite/src/views/register/Register.vue new file mode 100644 index 000000000..1db15a2a4 --- /dev/null +++ b/web/satellite/src/views/register/Register.vue @@ -0,0 +1,139 @@ +// Copyright (C) 2019 Storj Labs, Inc. +// See LICENSE for copying information. + + + + + + diff --git a/web/satellite/src/views/register/register.html b/web/satellite/src/views/register/register.html new file mode 100644 index 000000000..b4116a193 --- /dev/null +++ b/web/satellite/src/views/register/register.html @@ -0,0 +1,98 @@ + + + +
+
+ +
+ +
+
+ +
+

Login

+
+
+
+
+
+

Sign Up to Storj

+

Satellite:Mars

+
+ + + + + + +
+ + + +
+
+ + + +
+
+
+ +

I agree to the Terms & Conditions

+
+
+

Create Account

+
+
+
+
+
+ +
diff --git a/web/satellite/src/views/register/register.scss b/web/satellite/src/views/register/register.scss new file mode 100644 index 000000000..a6d649576 --- /dev/null +++ b/web/satellite/src/views/register/register.scss @@ -0,0 +1,413 @@ +// Copyright (C) 2019 Storj Labs, Inc. +// See LICENSE for copying information. + +body { + padding: 0 !important; + margin: 0 !important; +} + +.register-container { + position: fixed; + width: 100%; + height: 100%; + left: 0; + top: 0; + z-index: 10; + background-size: contain; + display: flex; + justify-content: flex-start; + flex-direction: column; + align-items: flex-start; + padding: 60px 0px 0px 104px; + background-image: url("../../../static/images/Background.png"); + background-repeat: no-repeat; + background-size: auto; + + .register-input { + position: relative; + width: 100%; + + span { + position: absolute; + top: 66px; + right: 43px; + } + } + + &__wrapper { + min-width: 50%; + height: 86vh; + } + + &__header { + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: row; + width: 100%; + } + + &__logo { + cursor: pointer; + width: 139px; + height: 62px; + } + + &__register-button { + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; + border-radius: 6px; + border: 1px solid white; + cursor: pointer; + width: 160px; + height: 48px; + + p { + font-family: 'font_bold'; + font-size: 14px; + line-height: 19px; + margin-block-start: 0; + margin-block-end: 0; + color: white; + } + + &:hover { + background-color: white; + + p { + color: #2683FF; + } + } + } +} + +.register-area-wrapper { + width: 100%; + height: 100%; + display: flex; + align-items: flex-start; + justify-content: flex-end; + margin-top: 50px; +} + +.register-area { + background-color: transparent; + width: 620px; + border-radius: 6px; + display: flex; + justify-content: center; + flex-direction: column; + align-items: flex-start; + + &__title-container { + height: 48px; + display: flex; + justify-content: space-between; + align-items: flex-end; + flex-direction: row; + margin-bottom: 20px; + width: 100%; + + h1 { + font-family: 'font_bold'; + font-size: 22px; + color: white; + line-height: 27px; + margin-block-start: 0; + margin-block-end: 0; + } + + p { + font-family: 'font_regular'; + font-size: 16px; + color: white; + line-height: 21px; + margin-block-start: 0; + margin-block-end: 0; + + b { + font-family: 'font_bold'; + margin-left: 7px; + } + } + } + + &__submit-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + margin-top: 20px; + + &__terms-area { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + &__checkbox { + align-self: center; + } + + h2 { + font-family: 'font_regular'; + font-size: 14px; + line-height: 20px; + margin-top: 14px; + margin-left: 10px; + color: white; + } + + a { + color: white; + font-family: 'font_bold'; + + &:hover { + text-decoration: underline; + } + } + + .container { + display: block; + position: relative; + padding-left: 20px; + height: 25px; + width: 25px; + cursor: pointer; + font-size: 22px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + outline: none; + } + + .container input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; + } + + .checkmark { + position: absolute; + top: 0; + left: 0; + height: 25px; + width: 25px; + border: 2px solid white; + border-radius: 4px; + } + + .container:hover input ~ .checkmark { + background-color: white; + } + + .container input:checked ~ .checkmark { + border: 2px solid white; + background-color: transparent; + } + + .checkmark:after { + content: ""; + position: absolute; + display: none; + } + + .checkmark.error { + border-color: red; + } + + .container input:checked ~ .checkmark:after { + display: block; + } + + .container .checkmark:after { + left: 9px; + top: 5px; + width: 5px; + height: 10px; + border: solid white; + border-width: 0 3px 3px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } + } + + &__create-button { + display: flex; + align-items: center; + justify-content: center; + background-color: #2683FF; + border-radius: 6px; + cursor: pointer; + width: 160px; + height: 48px; + box-shadow: 0px 16px 24px #3A54DF; + + p { + font-family: 'font_bold'; + font-size: 14px; + line-height: 19px; + margin-block-start: 0; + margin-block-end: 0; + color: white; + } + + &:hover { + box-shadow: none; + } + } + } +} + +.input-wrap.full-input { + width: 100%; +} + +.planet { + position: absolute; + bottom: -61px; + right: -257px; + z-index: -100; +} + +.loading-overlay { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + top: 0; + left: 0; + right: 0; + left: 0; + height: 100vh; + z-index: 100; + background-color: rgba(134, 134, 148, 0.7); + visibility: hidden; + opacity: 0; + -webkit-transition: all 0.5s linear; + -moz-transition: all 0.5s linear; + -o-transition: all 0.5s linear; + transition: all 0.5s linear; + + img { + z-index: 200; + } +} + +.loading-overlay.active { + visibility: visible; + opacity: 1; +} +@media screen and (max-height: 840px) { + .register-container { + overflow: hidden; + + &__wrapper { + height: 770px; + overflow-y: scroll; + overflow-x: hidden; + -ms-overflow-style: none; + overflow: -moz-scrollbars-none; + + &::-webkit-scrollbar { + width: 0 !important; + display: none; + } + } + } +} +@media screen and (max-height: 810px) { + .register-container { + &__wrapper { + height: 700px; + } + } + + .register-area__submit-container { + margin-bottom: 25px; + } +} +@media screen and (max-width: 840px) { + .planet { + display: none; + } +} +@media screen and (max-width: 800px) { + .register-container { + padding: 0; + align-items: center; + justify-content: center; + } + .planet { + display: none; + } +} +@media screen and (max-width: 650px) { + .register-container { + &__wrapper { + width: 500px; + } + } +} +@media screen and (max-width: 520px) { + .register-container { + &__wrapper { + width: 400px; + } + } +} +@media screen and (max-width: 420px) { + .register-container { + &__wrapper { + width: 350px; + } + } +} +@media screen and (max-width: 320px) { + .register-container { + &__wrapper { + width: 300px; + } + + &__header { + margin-top: 20px; + } + + &__register-button { + width: 120px; + height: 42px; + } + } + .register-area { + &__title-container { + h1 { + font-size: 20px; + line-height: 22px; + } + p { + font-size: 13px; + line-height: 17px; + } + } + &__submit-container { + &__terms-area { + h2 { + font-size: 12px; + } + } + &__create-button { + height: 40px; + p { + font-size: 12px; + } + } + } + } +}