From deaa6b41c21529cb01b4b9b895948149577b1f74 Mon Sep 17 00:00:00 2001 From: Dank Gabs Date: Mon, 22 Jul 2019 21:05:50 -0400 Subject: [PATCH 1/8] A little bit of cleanup. --- .../styles/gabsocial/components.scss | 45 +++---------------- 1 file changed, 6 insertions(+), 39 deletions(-) diff --git a/app/javascript/styles/gabsocial/components.scss b/app/javascript/styles/gabsocial/components.scss index 455f9af5..6afecead 100644 --- a/app/javascript/styles/gabsocial/components.scss +++ b/app/javascript/styles/gabsocial/components.scss @@ -1294,16 +1294,11 @@ a.account__display-name { text-decoration: none; } - -////////////////////////////////// - - .columns-area { display: flex; flex: 1 1 auto; flex-direction: row; justify-content: flex-start; - //overflow-x: auto; position: relative; &__panels { @@ -1314,10 +1309,6 @@ a.account__display-name { &__pane { height: 100%; - - // NOTE: regression-watch -- watch for regressions on this before deleting permanently - //overflow: hidden; - pointer-events: none; display: flex; justify-content: flex-end; @@ -1477,57 +1468,33 @@ a.account__display-name { flex-direction: column; width: 100%; margin: 0 auto; - overflow: hidden; - .column, .drawer { width: 100%; height: 100%; padding: 0; } - - .autosuggest-textarea__textarea { - font-size: 16px; - } - + .autosuggest-textarea__textarea {font-size: 16px;} .search__input { line-height: 18px; font-size: 16px; padding: 15px; padding-right: 30px; } - - .search__icon .fa { - top: 15px; - } - - @media screen and (min-width: 360px) { - padding: 15px 0; - } - + .search__icon .fa {top: 15px;} + @media screen and (min-width: 360px) {padding: 15px 0;} @media screen and (min-width: 630px) { .detailed-status { padding: 15px; - .media-gallery, .video-player { margin-top: 15px; } } - - .account__header__bar { - padding: 5px 10px; - } - + .account__header__bar {padding: 5px 10px;} .navigation-bar, - .compose-form { - padding: 15px; - } - - .compose-form .compose-form__publish .compose-form__publish-button-wrapper { - padding-top: 15px; - } - + .compose-form {padding: 15px;} + .compose-form .compose-form__publish .compose-form__publish-button-wrapper {padding-top: 15px;} .status { padding: 15px 15px 15px (48px + 15px * 2); min-height: 48px + 2px; From 9752de6a3e9295f42b87622633471a8eae7c8a2a Mon Sep 17 00:00:00 2001 From: Dank Gabs Date: Mon, 22 Jul 2019 21:08:29 -0400 Subject: [PATCH 2/8] Added the forgotten commit from the last merge request. The gab-container-standards mixin contains all standard container common properties (background color, corner radius, anything else shared across the board). --- app/javascript/styles/gabsocial/components/group-form.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/app/javascript/styles/gabsocial/components/group-form.scss b/app/javascript/styles/gabsocial/components/group-form.scss index 79f82c56..9e3ecc8f 100644 --- a/app/javascript/styles/gabsocial/components/group-form.scss +++ b/app/javascript/styles/gabsocial/components/group-form.scss @@ -1,11 +1,6 @@ .group-form { - background: $gab-background-container; - body.theme-gabsocial-light & { - background: $gab-background-container-light; - } padding: 15px; - border-radius: 10px; - + @include gab-container-standards(); .group-form__input { height: 40px; padding: 0 15px; From f7ca5f28dfd098284fa79907c9aff50e908fb6ce Mon Sep 17 00:00:00 2001 From: Dank Gabs Date: Mon, 22 Jul 2019 21:10:11 -0400 Subject: [PATCH 3/8] Adjust bottom margin of group cards to match mockup specs. --- app/javascript/styles/gabsocial/components/group-card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/styles/gabsocial/components/group-card.scss b/app/javascript/styles/gabsocial/components/group-card.scss index dac414e0..345915e2 100644 --- a/app/javascript/styles/gabsocial/components/group-card.scss +++ b/app/javascript/styles/gabsocial/components/group-card.scss @@ -27,7 +27,7 @@ display: block; flex: 0 0 calc(50% - 20px/2); @include gab-container-standards(); - margin-bottom: 15px; + margin-bottom: 20px; text-decoration: none; overflow: hidden; From fceb5dccb032e87f81385de7ac5617c9f7401b14 Mon Sep 17 00:00:00 2001 From: Dank Gabs Date: Mon, 22 Jul 2019 21:37:45 -0400 Subject: [PATCH 4/8] Added gab container standards css to the center column. The center columns still need a lot of work to bring to spec with the mockups. This is just one small step closer. --- app/javascript/styles/gabsocial/components.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/app/javascript/styles/gabsocial/components.scss b/app/javascript/styles/gabsocial/components.scss index 6afecead..65623a48 100644 --- a/app/javascript/styles/gabsocial/components.scss +++ b/app/javascript/styles/gabsocial/components.scss @@ -2412,12 +2412,11 @@ a.status-card.compact:hover { } } +.columns-area--mobile .column {@include gab-container-standards();} .column-header__wrapper { position: relative; flex: 0 0 auto; - border-top-right-radius: 10px; - border-top-left-radius: 10px; - overflow: hidden; + overflow: hidden; &.active { &::before { From 97ad49c617a3c2084a9b4f670b864e51daf70592 Mon Sep 17 00:00:00 2001 From: Dank Gabs Date: Mon, 22 Jul 2019 21:40:19 -0400 Subject: [PATCH 5/8] Added container standards to the inline composer block. Some css cleanup. --- app/javascript/styles/gabsocial/components.scss | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/app/javascript/styles/gabsocial/components.scss b/app/javascript/styles/gabsocial/components.scss index 65623a48..d7521d83 100644 --- a/app/javascript/styles/gabsocial/components.scss +++ b/app/javascript/styles/gabsocial/components.scss @@ -235,23 +235,14 @@ } } -.ellipsis { - &::after { - content: "…"; - } -} +.ellipsis::after {content: "…";} .timeline-compose-block { display: flex; align-items: flex-start; padding: 20px; - border-radius: 10px; - margin-bottom: 10px; - background: $gab-background-container; - body.theme-gabsocial-light & { - @include light-theme-shadow(); - background: $gab-background-container-light; - } + margin-bottom: 20px; + @include gab-container-standards(); .emoji-picker-wrapper { .emoji-picker-dropdown {top: 10px;} } From 47a18f60240e1b9c5610b3f927249e0883bdf28c Mon Sep 17 00:00:00 2001 From: Dank Gabs Date: Mon, 22 Jul 2019 22:35:46 -0400 Subject: [PATCH 6/8] Adjustments to the create group form to match mockup specs. Strip out css for form input from component css file. Created global form input css. Padding adjustments. --- .../gabsocial/features/groups/create/index.js | 6 +- .../gabsocial/features/groups/edit/index.js | 6 +- app/javascript/styles/application.scss | 1 + .../gabsocial/components/group-form.scss | 74 ++++++------------- .../styles/gabsocial/components/inputs.scss | 34 +++++++++ 5 files changed, 67 insertions(+), 54 deletions(-) create mode 100644 app/javascript/styles/gabsocial/components/inputs.scss diff --git a/app/javascript/gabsocial/features/groups/create/index.js b/app/javascript/gabsocial/features/groups/create/index.js index b99553ef..97b376a8 100644 --- a/app/javascript/gabsocial/features/groups/create/index.js +++ b/app/javascript/gabsocial/features/groups/create/index.js @@ -75,7 +75,8 @@ class Create extends React.PureComponent {
Date: Mon, 22 Jul 2019 22:36:54 -0400 Subject: [PATCH 7/8] Fixed border radius. --- app/javascript/styles/gabsocial/components/inputs.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/styles/gabsocial/components/inputs.scss b/app/javascript/styles/gabsocial/components/inputs.scss index e8a53402..df5bd1de 100644 --- a/app/javascript/styles/gabsocial/components/inputs.scss +++ b/app/javascript/styles/gabsocial/components/inputs.scss @@ -2,7 +2,7 @@ input { &.standard { &[type='text'] { border: 1px solid; - corner-radius: 4px; + border-radius: 4px; @include font-size(16); border-color: $gab-placeholder-accent; background: $gab-background-container; From 48b66e4352f7e209b3d640c3380a62573400090b Mon Sep 17 00:00:00 2001 From: Dank Gabs Date: Mon, 22 Jul 2019 23:22:42 -0400 Subject: [PATCH 8/8] Adjustments made to the standard form text input and textarea for both themes. --- .../gabsocial/features/groups/create/index.js | 2 +- .../gabsocial/features/groups/edit/index.js | 2 +- app/javascript/styles/gabsocial/_mixins.scss | 8 ++- .../gabsocial/components/group-form.scss | 8 +++ .../styles/gabsocial/components/inputs.scss | 49 +++++++------------ 5 files changed, 36 insertions(+), 33 deletions(-) diff --git a/app/javascript/gabsocial/features/groups/create/index.js b/app/javascript/gabsocial/features/groups/create/index.js index 97b376a8..28079f97 100644 --- a/app/javascript/gabsocial/features/groups/create/index.js +++ b/app/javascript/gabsocial/features/groups/create/index.js @@ -84,7 +84,7 @@ class Create extends React.PureComponent { />
-
-