[Glitch] Add single-column mode
Port 9ddeb30f90 to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Eugen Rochko
ThibG
@@ -13,16 +13,6 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@include limited-single-column('screen and (min-width: 360px)', $parent: null) {
|
||||
.columns-area {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.react-swipeable-view-container .columns-area {
|
||||
height: calc(100% - 20px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.react-swipeable-view-container {
|
||||
&,
|
||||
.columns-area,
|
||||
@@ -63,34 +53,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@include limited-single-column('screen and (min-width: 360px)', $parent: null) {
|
||||
.tabs-bar {
|
||||
margin: 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:root { // Overrides .wide stylings for mobile view
|
||||
@include single-column('screen and (max-width: 630px)', $parent: null) {
|
||||
.column {
|
||||
flex: auto;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.columns-area {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search__input,
|
||||
.autosuggest-textarea__textarea {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include multi-columns('screen and (min-width: 631px)', $parent: null) {
|
||||
.columns-area {
|
||||
padding: 0;
|
||||
@@ -442,6 +404,10 @@
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
& > span {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $highlight-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
@@ -276,6 +276,7 @@
|
||||
background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
|
||||
flex: 1;
|
||||
min-height: 47px;
|
||||
display: none;
|
||||
|
||||
> img {
|
||||
display: block;
|
||||
@@ -295,6 +296,10 @@
|
||||
border: none;
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
@media screen and (min-height: 640px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.pseudo-drawer {
|
||||
|
||||
@@ -553,6 +553,7 @@
|
||||
}
|
||||
|
||||
.tabs-bar {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
background: lighten($ui-base-color, 8%);
|
||||
flex: 0 0 auto;
|
||||
@@ -590,15 +591,130 @@
|
||||
}
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
span {
|
||||
margin-left: 5px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include multi-columns('screen and (min-width: 631px)', $parent: null) {
|
||||
@media screen and (min-width: 600px) {
|
||||
.tabs-bar__link {
|
||||
span {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-area--mobile {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
|
||||
.column,
|
||||
.drawer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search__input,
|
||||
.autosuggest-textarea__textarea {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 630px) {
|
||||
.detailed-status {
|
||||
padding: 15px;
|
||||
|
||||
.media-gallery,
|
||||
.video-player {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 15px 15px 15px (48px + 15px * 2);
|
||||
min-height: 48px + 2px;
|
||||
|
||||
&__avatar {
|
||||
left: 15px;
|
||||
top: 17px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
&__prepend {
|
||||
margin-left: 48px + 15px * 2;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
&__prepend-icon-wrapper {
|
||||
left: -32px;
|
||||
}
|
||||
|
||||
.media-gallery,
|
||||
&__action-bar,
|
||||
.video-player {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
.tabs-bar {
|
||||
display: none;
|
||||
margin: 10px auto;
|
||||
margin-bottom: 0;
|
||||
width: calc(100% - 20px);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.react-swipeable-view-container .columns-area--mobile {
|
||||
height: calc(100% - 20px) !important;
|
||||
}
|
||||
|
||||
.getting-started__wrapper,
|
||||
.getting-started__trends,
|
||||
.search {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-with-badge {
|
||||
position: relative;
|
||||
|
||||
&__badge {
|
||||
position: absolute;
|
||||
right: -13px;
|
||||
top: -13px;
|
||||
background: $ui-highlight-color;
|
||||
border: 2px solid lighten($ui-base-color, 8%);
|
||||
padding: 1px 6px;
|
||||
border-radius: 6px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1272,6 +1388,61 @@
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.navigational-toggle {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
color: $dark-text-color;
|
||||
}
|
||||
|
||||
.layout-toggle {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
|
||||
button {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 50%;
|
||||
background: transparent;
|
||||
padding: 5px;
|
||||
border: 0;
|
||||
position: relative;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
svg path:first-child {
|
||||
fill: lighten($ui-base-color, 16%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
path:first-child {
|
||||
fill: lighten($ui-base-color, 12%);
|
||||
}
|
||||
|
||||
path:last-child {
|
||||
fill: darken($ui-base-color, 14%);
|
||||
}
|
||||
}
|
||||
|
||||
&__active {
|
||||
color: $ui-highlight-color;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: lighten($ui-base-color, 12%);
|
||||
border-radius: 50%;
|
||||
padding: 0.35rem;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user