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

9
index.html
View File

@ -848,10 +848,11 @@
const type = editors ? 'Private' : 'Public'
return html`
<a class="sheet-card interactive" href=${`#/sheet_view?id=${sheetId}`} .dataset=${{ name: title }}>
<div class="card">
<h5>${type}</h5>
<div class="sheet-card__icon">
<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>
<h4>${title}</h4>
<span class="sheet-card__type">${type}</span>
</a>
`;
},
@ -1261,8 +1262,8 @@
if (floGlobals.subAdmins.includes(myFloID)) {
const firstCard = html`
<div id="add_new_sheet" class="sheet-card interactive" onclick="openPopup('new_sheet_popup')">
<div class="card">
<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>
<div class="sheet-card__icon">
<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>
<h4>Add new sheet</h4>
</div>