rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: tablet responsiveness (#1369)

Browse Source 
* feat: "Notes" column responsiveness for tablets

* feat: ability to expand/collapse the navigation column, move some styles to tailwind

* feat: ability to expand/collapse the navigation column, move some styles to tailwind

* feat: icon for collapsing/expanding navigation column, style improvements

* fix: restore vertical panels resizability on large screens

* feat: tags/folders section for collapsed state

* feat: notes subsection styling in navigation section

* feat: hide rename & delete links of smart views when in collapsed mode

* fix: show notes count in bold when in collapsed mode

* fix: better padding for folders in collapsed state

* fix: smaller left padding for collapsed case

* fix: better view of expand/collapse control

* fix: hide search bar when collapsed

* fix: adjust position of "expand" control when in collapsed state

* chore: remove comments

* refactor: use `classNames` util when applying conditional css classes

* chore: shorter class names syntax

* chore: shorter syntax for conditional classes

* fix: better way of setting background color with opacity

* fix: use variable colors according to SN themes

* chore: move "colors" from "extend" section and thus override Tailwind's colors (so only SN colors will exist)

* fix: correct hover style in collapsed mode

* fix: correct upper boundary for extra small screens
This commit is contained in:
Vardan Hakobyan
2022-08-08 11:07:15 +04:00
committed by GitHub
parent 8332a70384
commit f555fbcaaa
13 changed files with 369 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/web/src/stylesheets/_columns.scss
View File

@@ -9,22 +9,6 @@
}
}
.app-column-first {
width: 220px;
@media screen and (max-width: 768px) {
width: 100% !important;
}
}
.app-column-second {
width: 350px;
@media screen and (max-width: 768px) {
width: 100% !important;
}
}
.app-column {
overflow: hidden;

15
packages/web/src/stylesheets/_sn.scss
View File

@@ -132,6 +132,21 @@
@include DimmedBackground(var(--sn-stylekit-info-color), 0.08);
}
.transparent-info-color-background {
&::after {
@include DimmedBackground(var(--sn-stylekit-info-color), .12);
border-radius: 100px;
}
}
.transparent-info-color-background-hover {
&:hover {
&::after {
@extend .transparent-info-color-background
}
}
}
svg.sk-circular-progress {
$pi: 3.14159265358979;