luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

GH-2330 - Responsive UI update on template picker (#2486)

Browse source 
* GH-2330 - Responsive UI update on template picker

* Updating css
This commit is contained in:
Asaad Mahmood 2022-03-08 23:53:09 +05:00 committed by GitHub
parent 49df41f9b2
commit 380320179c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
webapp/src/components/boardTemplateSelector/boardTemplateSelector.scss
View file

@ -36,9 +36,13 @@
.templates { .templates {
display: flex; display: flex;
width: 100%; width: 100%;
padding: 0 10%; padding: 0 32px;
justify-content: center; justify-content: center;
@media (min-width: 768px) {
padding: 0 10%;
}
.templates-list { .templates-list {
margin-right: 32px; margin-right: 32px;
width: 300px; width: 300px;
@ -63,32 +67,42 @@
} }
} }
} }
}
.template-preview-box { .template-preview-box {
position: relative; position: relative;
background-color: rgb(var(--center-channel-bg-rgb)); background-color: rgb(var(--center-channel-bg-rgb));
box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0 0 0 1px, box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0 0 0 1px,
rgba(var(--center-channel-color-rgb), 0.1) 0 2px 4px; rgba(var(--center-channel-color-rgb), 0.1) 0 2px 4px;
border-radius: var(--modal-rad); border-radius: var(--modal-rad);
overflow: hidden; overflow: hidden;
width: 100%;
max-width: 1000px;
.buttons {
display: flex;
position: absolute;
bottom: 32px;
width: 100%; width: 100%;
max-width: 1000px; justify-content: center;
flex-direction: column;
padding: 0 24px;
.buttons { @media (min-width: 1024px) {
display: flex; flex-direction: row;
position: absolute;
bottom: 32px;
width: 100%;
justify-content: center;
} }
}
.empty-board { .empty-board {
background-color: rgb(var(--center-channel-bg-rgb)); background-color: rgb(var(--center-channel-bg-rgb));
} }
.Button { .Button {
&:first-child { &:first-child {
margin-right: 16px; margin-bottom: 16px;
@media (min-width: 1024px) {
margin: 0 16px 0 0;
} }
} }
} }