RanchiMall/flologsheet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI improvements

Browse Source
This commit is contained in:
sairaj mote 2022-09-17 18:03:56 +05:30
parent 782f0ce689
commit 4d6563a197
4 changed files with 80 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
css/main.css
View File

@ -782,7 +782,7 @@ ul {
} }
#home_page { #home_page {
padding: 1rem 1.5rem; padding: 1rem;
} }
.section-header { .section-header {
@ -791,7 +791,6 @@ ul {
top: 0; top: 0;
z-index: 1; z-index: 1;
background: var(--dark-shade); background: var(--dark-shade);
padding: 1rem 0;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.section-header h4 { .section-header h4 {
@ -812,8 +811,9 @@ ul {
} }
#sheets_container { #sheets_container {
gap: 2rem 1.5rem; display: grid;
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
gap: 0.5rem;
margin-bottom: 3rem; margin-bottom: 3rem;
-webkit-animation: slide-up 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-animation: slide-up 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: slide-up 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: slide-up 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
@ -836,18 +836,7 @@ ul {
transform: none; transform: none;
} }
} }
#add_new_sheet .icon { #add_new_sheet .sheet-card__icon {
height: 2rem;
width: 2rem;
stroke-width: 10;
stroke: #fff;
stroke-linecap: square;
opacity: 1;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
#add_new_sheet .card {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -855,41 +844,38 @@ ul {
background: url(card-bg1.svg), #a7003e; background: url(card-bg1.svg), #a7003e;
background-size: cover; background-size: cover;
} }
#add_new_sheet .icon {
fill: rgba(var(--foreground-color), 1);
}
.sheet-card { .sheet-card {
position: relative; position: relative;
display: flex; display: grid;
flex-direction: column;
align-items: center;
color: inherit; color: inherit;
} grid-template-columns: auto 1fr auto;
.sheet-card .card { align-items: center;
position: relative; background-color: rgba(var(--foreground-color), 1);
border-radius: 0.5rem;
background: url(card-bg2.svg) center, rgba(var(--text-color), 0.06);
background-size: contain;
padding: 1rem; padding: 1rem;
padding-top: 66%; border-radius: 0.5rem;
width: 100%; transition: 0.2s;
transition: box-shadow 0.3s, transform 0.3s; border: solid thin rgba(var(--text-color), 0.1);
}
.sheet-card__icon {
display: flex;
padding: 0.6rem;
border-radius: 2rem;
background: rgba(var(--text-color), 0.06);
margin-right: 1rem;
} }
.sheet-card h4 { .sheet-card h4 {
font-weight: 400;
opacity: 0.9; opacity: 0.9;
margin-top: 0.8rem; font-size: 1rem;
text-align: center;
max-width: 90%;
} }
.sheet-card h5 { .sheet-card__type {
font-size: 0.8rem;
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
position: absolute; padding: 0.3rem 0.6rem;
top: 0; border-radius: 1rem;
right: 0;
margin: 0.5rem 0;
padding: 0.4rem 0.6rem;
border-radius: 0.2rem 0 0 0.2rem;
font-weight: 500;
opacity: 0.8;
} }
#sheet_view { #sheet_view {
@ -1078,9 +1064,12 @@ th.ascending::after {
background: rgba(var(--background-color), 1); background: rgba(var(--background-color), 1);
bottom: 0; bottom: 0;
top: 0; top: 0;
left: 0;
right: 0;
width: 100%;
} }
#side_bar > .flex:first-of-type { #side_bar > .flex:first-of-type {
padding: 0 1rem; padding: 0.5rem 1rem;
} }
#side_bar .section-header { #side_bar .section-header {
margin-bottom: 0; margin-bottom: 0;
@ -1348,10 +1337,6 @@ th.ascending::after {
#main_header > div { #main_header > div {
grid-area: main; grid-area: main;
} }
#sheets_container {
gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
#sheet_view.toggle-side-bar { #sheet_view.toggle-side-bar {
grid-template-columns: 19rem 1fr; grid-template-columns: 19rem 1fr;
} }
@ -1406,6 +1391,11 @@ th.ascending::after {
z-index: 1; z-index: 1;
box-shadow: -0.5rem 0 0.5rem rgba(0, 0, 0, 0.062745098); box-shadow: -0.5rem 0 0.5rem rgba(0, 0, 0, 0.062745098);
} }
.sheet-card:hover {
transform: scale(1.02);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
z-index: 1;
}
} }
.hidden { .hidden {
display: none; display: none;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

85
css/main.scss
View File

@ -779,14 +779,13 @@ ul {
} }
} }
#home_page { #home_page {
padding: 1rem 1.5rem; padding: 1rem;
} }
.section-header { .section-header {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
background: var(--dark-shade); background: var(--dark-shade);
padding: 1rem 0;
margin-bottom: 1rem; margin-bottom: 1rem;
h4 { h4 {
font-size: 1.2rem; font-size: 1.2rem;
@ -811,8 +810,9 @@ ul {
} }
#sheets_container { #sheets_container {
gap: 2rem 1.5rem; display: grid;
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
gap: 0.5rem;
margin-bottom: 3rem; margin-bottom: 3rem;
animation: slide-up 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: slide-up 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
} }
@ -827,18 +827,7 @@ ul {
} }
#add_new_sheet { #add_new_sheet {
.icon { .sheet-card__icon {
height: 2rem;
width: 2rem;
stroke-width: 10;
stroke: #fff;
stroke-linecap: square;
opacity: 1;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
.card {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -846,41 +835,38 @@ ul {
background: url(card-bg1.svg), #a7003e; background: url(card-bg1.svg), #a7003e;
background-size: cover; background-size: cover;
} }
.icon {
fill: rgba(var(--foreground-color), 1);
}
} }
.sheet-card { .sheet-card {
position: relative; position: relative;
display: flex; display: grid;
flex-direction: column;
align-items: center;
color: inherit; color: inherit;
.card { grid-template-columns: auto 1fr auto;
position: relative; align-items: center;
border-radius: 0.5rem; background-color: rgba(var(--foreground-color), 1);
background: url(card-bg2.svg) center, rgba(var(--text-color), 0.06); padding: 1rem;
background-size: contain; border-radius: 0.5rem;
padding: 1rem; transition: 0.2s;
padding-top: 66%; border: solid thin rgba(var(--text-color), 0.1);
width: 100%; &__icon {
transition: box-shadow 0.3s, transform 0.3s; display: flex;
padding: 0.6rem;
border-radius: 2rem;
background: rgba(var(--text-color), 0.06);
margin-right: 1rem;
} }
h4 { h4 {
font-weight: 400;
opacity: 0.9; opacity: 0.9;
margin-top: 0.8rem; font-size: 1rem;
text-align: center;
max-width: 90%;
} }
h5 { &__type {
font-size: 0.8rem;
background: rgba(var(--text-color), 0.1); background: rgba(var(--text-color), 0.1);
position: absolute; padding: 0.3rem 0.6rem;
top: 0; border-radius: 1rem;
right: 0;
margin: 0.5rem 0;
padding: 0.4rem 0.6rem;
border-radius: 0.2rem 0 0 0.2rem;
font-weight: 500;
opacity: 0.8;
} }
} }
@ -1058,8 +1044,11 @@ th.ascending::after {
background: rgba(var(--background-color), 1); background: rgba(var(--background-color), 1);
bottom: 0; bottom: 0;
top: 0; top: 0;
left: 0;
right: 0;
width: 100%;
& > .flex:first-of-type { & > .flex:first-of-type {
padding: 0 1rem; padding: 0.5rem 1rem;
} }
.section-header { .section-header {
margin-bottom: 0; margin-bottom: 0;
@ -1300,11 +1289,6 @@ th.ascending::after {
#main_header > div { #main_header > div {
grid-area: main; grid-area: main;
} }
#sheets_container {
gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
#sheet_view { #sheet_view {
&.toggle-side-bar { &.toggle-side-bar {
grid-template-columns: 19rem 1fr; grid-template-columns: 19rem 1fr;
@ -1365,6 +1349,13 @@ th.ascending::after {
z-index: 1; z-index: 1;
box-shadow: -0.5rem 0 0.5rem #00000010; box-shadow: -0.5rem 0 0.5rem #00000010;
} }
.sheet-card {
&:hover {
transform: scale(1.02);
box-shadow: 0 0.5rem 1rem rgba(0 0 0 /0.1);
z-index: 1;
}
}
} }
.hidden { .hidden {
display: none; display: none;

9
index.html
View File

@ -848,10 +848,11 @@
const type = editors ? 'Private' : 'Public' const type = editors ? 'Private' : 'Public'
return html` return html`
<a class="sheet-card interactive" href=${`#/sheet_view?id=${sheetId}`} .dataset=${{ name: title }}> <a class="sheet-card interactive" href=${`#/sheet_view?id=${sheetId}`} .dataset=${{ name: title }}>
<div class="card"> <div class="sheet-card__icon">
<h5>${type}</h5> <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>
</div> </div>
<h4>${title}</h4> <h4>${title}</h4>
<span class="sheet-card__type">${type}</span>
</a> </a>
`; `;
}, },
@ -1261,8 +1262,8 @@
if (floGlobals.subAdmins.includes(myFloID)) { if (floGlobals.subAdmins.includes(myFloID)) {
const firstCard = html` const firstCard = html`
<div id="add_new_sheet" class="sheet-card interactive" onclick="openPopup('new_sheet_popup')"> <div id="add_new_sheet" class="sheet-card interactive" onclick="openPopup('new_sheet_popup')">
<div class="card"> <div class="sheet-card__icon">
<svg class="icon" viewBox="0 0 64 64"> <title>add</title> <line x1="32" x2="32" y2="64" /> <line x1="64" y1="32" y2="32" /> </svg> <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
</div> </div>
<h4>Add new sheet</h4> <h4>Add new sheet</h4>
</div> </div>