From 0bdfa940a05094ff3ee2d77d1fd45d166c202363 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Fri, 30 Mar 2018 08:42:35 -0700
Subject: [PATCH] More responsive fixes
---
.../images/hub_create_button_disabled.svg | 13 +++-------
.../images/hub_create_button_enabled.svg | 15 +++---------
src/assets/stylesheets/hub-create.scss | 18 +++++++-------
src/assets/stylesheets/index.scss | 24 ++++++++++---------
4 files changed, 28 insertions(+), 42 deletions(-)
diff --git a/src/assets/images/hub_create_button_disabled.svg b/src/assets/images/hub_create_button_disabled.svg
index b19753f50..168e43e80 100755
--- a/src/assets/images/hub_create_button_disabled.svg
+++ b/src/assets/images/hub_create_button_disabled.svg
@@ -7,21 +7,14 @@
<use xlink:href="#path0_stroke" transform="translate(94 238)" fill="#C0C0C0"/>
</g>
<g id="Group 7">
-<g id="Rectangle">
-<use xlink:href="#path1_fill" transform="translate(112.7 260.667)" fill="#C0C0C0"/>
-</g>
-<g id="Vector">
-<use xlink:href="#path2_fill" transform="translate(119.5 255.567)" fill="#C0C0C0"/>
-</g>
-<g id="Vector">
-<use xlink:href="#path2_fill" transform="matrix(1 0 0 -1 119.5 270.867)" fill="#C0C0C0"/>
+<g id="Union">
+<use xlink:href="#path1_fill" transform="translate(112.7 255.567)" fill="#C0C0C0"/>
</g>
</g>
</g>
</g>
<defs>
<path id="path0_stroke" d="M 25.5 52.5C 40.4117 52.5 52.5 40.4117 52.5 25.5L 49.5 25.5C 49.5 38.7548 38.7548 49.5 25.5 49.5L 25.5 52.5ZM 52.5 25.5C 52.5 10.5883 40.4117 -1.5 25.5 -1.5L 25.5 1.5C 38.7548 1.5 49.5 12.2452 49.5 25.5L 52.5 25.5ZM 25.5 -1.5C 10.5883 -1.5 -1.5 10.5883 -1.5 25.5L 1.5 25.5C 1.5 12.2452 12.2452 1.5 25.5 1.5L 25.5 -1.5ZM -1.5 25.5C -1.5 40.4117 10.5883 52.5 25.5 52.5L 25.5 49.5C 12.2452 49.5 1.5 38.7548 1.5 25.5L -1.5 25.5Z"/>
-<path id="path1_fill" d="M 0 0L 6.8 0L 6.8 5.1L 0 5.1L 0 0Z"/>
-<path id="path2_fill" d="M 8.5 7.65L 0 7.65L 0 0L 8.5 7.65Z"/>
+<path id="path1_fill" fill-rule="evenodd" d="M 6.8 1.52588e-05L 15.3 7.65001L 6.8 15.3L 6.80001 10.2L 7.62939e-06 10.2L 7.62939e-06 5.10002L 6.80001 5.10002L 6.8 1.52588e-05Z"/>
</defs>
</svg>
diff --git a/src/assets/images/hub_create_button_enabled.svg b/src/assets/images/hub_create_button_enabled.svg
index f373b8184..f69698471 100755
--- a/src/assets/images/hub_create_button_enabled.svg
+++ b/src/assets/images/hub_create_button_enabled.svg
@@ -7,23 +7,14 @@
<use xlink:href="#path0_fill" transform="translate(94 238)" fill="#2F80ED"/>
<use xlink:href="#path1_stroke" transform="translate(94 238)" fill="#FFFFFF"/>
</g>
-<g id="Group 7">
-<g id="Rectangle">
-<use xlink:href="#path2_fill" transform="translate(112.7 260.667)" fill="#FFFFFF"/>
-</g>
-<g id="Vector">
-<use xlink:href="#path3_fill" transform="translate(119.5 255.567)" fill="#FFFFFF"/>
-</g>
-<g id="Vector">
-<use xlink:href="#path3_fill" transform="matrix(1 0 0 -1 119.5 270.867)" fill="#FFFFFF"/>
-</g>
+<g id="Union">
+<use xlink:href="#path2_fill" transform="translate(112.7 255.567)" fill="#FFFFFF"/>
</g>
</g>
</g>
<defs>
<path id="path0_fill" fill-rule="evenodd" d="M 25.5 51C 39.5833 51 51 39.5833 51 25.5C 51 11.4167 39.5833 0 25.5 0C 11.4167 0 0 11.4167 0 25.5C 0 39.5833 11.4167 51 25.5 51Z"/>
<path id="path1_stroke" d="M 25.5 52.5C 40.4117 52.5 52.5 40.4117 52.5 25.5L 49.5 25.5C 49.5 38.7548 38.7548 49.5 25.5 49.5L 25.5 52.5ZM 52.5 25.5C 52.5 10.5883 40.4117 -1.5 25.5 -1.5L 25.5 1.5C 38.7548 1.5 49.5 12.2452 49.5 25.5L 52.5 25.5ZM 25.5 -1.5C 10.5883 -1.5 -1.5 10.5883 -1.5 25.5L 1.5 25.5C 1.5 12.2452 12.2452 1.5 25.5 1.5L 25.5 -1.5ZM -1.5 25.5C -1.5 40.4117 10.5883 52.5 25.5 52.5L 25.5 49.5C 12.2452 49.5 1.5 38.7548 1.5 25.5L -1.5 25.5Z"/>
-<path id="path2_fill" d="M 0 0L 6.8 0L 6.8 5.1L 0 5.1L 0 0Z"/>
-<path id="path3_fill" d="M 8.5 7.65L 0 7.65L 0 0L 8.5 7.65Z"/>
+<path id="path2_fill" fill-rule="evenodd" d="M 6.8 0L 15.3 7.64999L 6.8 15.3L 6.8 10.2L 0 10.2L 0 5.10001L 6.8 5.10001L 6.8 0Z"/>
</defs>
</svg>
diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss
index e40c8bc76..37ce5c39b 100644
--- a/src/assets/stylesheets/hub-create.scss
+++ b/src/assets/stylesheets/hub-create.scss
@@ -28,7 +28,7 @@
width: 700px;
}
-@media (max-width: 768px) {
+@media (max-width: 768px) , (max-height: 715px) {
.create-panel__form {
width: auto;
width: 500px;
@@ -57,10 +57,10 @@
}
.create-panel__form__name--expanded {
- padding-top: 415px;
+ padding-top: 365px;
}
-@media (max-width: 768px) {
+@media (max-width: 768px) , (max-height: 715px) {
.create-panel__form__name {
min-width: auto;
font-size: 1.5em;
@@ -139,7 +139,7 @@
pointer-events: none;
}
-@media (max-width: 768px) {
+@media (max-width: 768px) , (max-height: 715px) {
.create-panel__form__environment {
width: 100%;
}
@@ -147,13 +147,13 @@
.create-panel__form__environment__picker {
width: 100%;
- height: 390px;
+ height: 340px;
border-bottom: 3px solid white;
overflow: hidden;
position: relative;
}
-@media (max-width: 768px) {
+@media (max-width: 768px) , (max-height: 715px) {
.create-panel__form__environment__picker {
height: 280px;
}
@@ -166,8 +166,8 @@
}
.create-panel__form__environment__picker__image {
- width: 100%;
+ width: 112%;
position: absolute;
- top: 0;
- left: 0;
+ top: -3%;
+ left: -3%;
}
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 7b65679ef..5621f0502 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -46,14 +46,6 @@ body {
z-index: 1;
}
-@media (max-width: 768px) {
- .background-video video {
- width: 50%;
- height: 50%;
- }
-}
-
-
.header-content {
padding: 1.5em 2.5em 1.5em 2.5em;
background-color: rgba(0, 0, 0, 0.85);
@@ -162,9 +154,14 @@ body {
font-weight: bold;
}
-@media (max-width: 768px) {
+@media (max-width: 768px) , (max-height: 715px) {
.hero-content__container__title {
font-size: 1.9em;
+ }
+}
+
+@media (max-width: 768px) {
+ .hero-content__container__title {
text-align: center;
}
}
@@ -181,14 +178,19 @@ body {
color: $light-text;
}
-@media (max-width: 768px) {
+@media (max-width: 768px) , (max-height: 715px) {
.hero-content__container__subtitle {
font-size: 1.1em;
- text-align: center;
margin-top: 0.2em;
}
}
+@media (max-width: 768px) {
+ .hero-content__container__subtitle {
+ text-align: center;
+ }
+}
+
@media (min-width: 1824px) {
.hero-content__container__subtitle {
font-size: 2.8em;
--
GitLab