UI changes

-- reduced space used by header on mobile screen
This commit is contained in:
sairaj mote 2022-12-14 02:02:39 +05:30
parent 3db39e6ab4
commit 0e809d85b0
4 changed files with 12 additions and 12 deletions

View File

@ -900,7 +900,6 @@ ul {
display: grid; display: grid;
gap: 0.8rem 1rem; gap: 0.8rem 1rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin-bottom: 0.5rem;
width: 100%; width: 100%;
align-items: center; align-items: center;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
@ -1101,7 +1100,6 @@ ul {
} }
#dashboard_page { #dashboard_page {
padding-top: 0;
padding-bottom: 5rem; padding-bottom: 5rem;
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
overflow-y: auto; overflow-y: auto;
@ -1207,7 +1205,6 @@ ul {
} }
#updates_page { #updates_page {
padding-top: 0;
align-content: flex-start; align-content: flex-start;
} }
#updates_page sm-select { #updates_page sm-select {
@ -2093,7 +2090,10 @@ input[type=date]:focus {
grid-area: 1/1/2/2; grid-area: 1/1/2/2;
} }
#user_profile_button { #user_profile_button {
grid-column: 1/-1; grid-area: 1/1/2/2;
}
theme-toggle {
grid-area: 1/2/2/3;
} }
#main_nav { #main_nav {
justify-content: space-evenly; justify-content: space-evenly;
@ -2135,7 +2135,7 @@ input[type=date]:focus {
grid-template-columns: 1fr auto auto; grid-template-columns: 1fr auto auto;
} }
#main_nav { #main_nav {
padding: 0 0.5rem; padding: 1rem 0.5rem;
background-color: rgba(var(--background-color), 1); background-color: rgba(var(--background-color), 1);
flex-direction: column; flex-direction: column;
} }

2
css/main.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -859,7 +859,6 @@ ul {
display: grid; display: grid;
gap: 0.8rem 1rem; gap: 0.8rem 1rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin-bottom: 0.5rem;
width: 100%; width: 100%;
align-items: center; align-items: center;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
@ -1074,7 +1073,6 @@ ul {
} }
#dashboard_page { #dashboard_page {
padding-top: 0;
padding-bottom: 5rem; padding-bottom: 5rem;
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
overflow-y: auto; overflow-y: auto;
@ -1175,7 +1173,6 @@ ul {
} }
#updates_page { #updates_page {
padding-top: 0;
align-content: flex-start; align-content: flex-start;
sm-select { sm-select {
--max-height: 50vh; --max-height: 50vh;
@ -2032,7 +2029,10 @@ input[type="date"] {
} }
} }
#user_profile_button { #user_profile_button {
grid-column: 1/-1; grid-area: 1/1/2/2;
}
theme-toggle {
grid-area: 1/2/2/3;
} }
#main_nav { #main_nav {
justify-content: space-evenly; justify-content: space-evenly;
@ -2075,7 +2075,7 @@ input[type="date"] {
grid-template-columns: 1fr auto auto; grid-template-columns: 1fr auto auto;
} }
#main_nav { #main_nav {
padding: 0 0.5rem; padding: 1rem 0.5rem;
background-color: rgba(var(--background-color), 1); background-color: rgba(var(--background-color), 1);
flex-direction: column; flex-direction: column;
theme-toggle { theme-toggle {

View File

@ -205,7 +205,7 @@
</div> </div>
<main id="main_page" class="grid page hidden"> <main id="main_page" class="grid page hidden">
<header id="main_header" class="space-between"> <header id="main_header" class="space-between">
<div class="flex align-center flex-1"> <div class="flex align-center flex-1 hide-on-mobile">
<svg class="icon margin-right-0-3" viewBox="0 0 27.25 32"> <svg class="icon margin-right-0-3" viewBox="0 0 27.25 32">
<title>RanchiMall</title> <title>RanchiMall</title>
<path <path