mobile optimization for search in dashboard. Adjusted dashboard cards to have the card clickable plus each user clickable too. adjusted nav links to be smaller / replaced flex with grid

This commit is contained in:
stitch 2024-08-07 12:12:22 +03:00
parent 8fbcb981ce
commit 6313eceaa7
4 changed files with 67 additions and 51 deletions

View File

@ -72,6 +72,12 @@
.secMainBodySecInside_DashboardSecTopSecRightSec.secMainBodySecInside_DashboardSecTopSecRightSecSearch {
}
@media (max-width: 768px) {
.secMainBodySecInside_DashboardSecTopSecRightSec.secMainBodySecInside_DashboardSecTopSecRightSecSearch {
width: 100%;
}
}
.secMainBodySecInside_DashboardSecTopSecRightSec.secMainBodySecInside_DashboardSecTopSecRightSecBtns {
align-items: stretch;
}
@ -256,6 +262,7 @@
justify-content: center;
align-items: center;
border: solid 2px #4c82a3;
z-index: 1;
}
.secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther {
@ -328,3 +335,11 @@
line-height: 1.25;
}
.secMainBodySecInside_DashboardSecMidCardsWrapLinkAlt {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}

View File

@ -70,18 +70,23 @@
.secMainFooterInsideTopSecMidInside {
width: 100%;
display: flex;
flex-direction: row;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 15px;
flex-wrap: wrap;
justify-content: start;
align-items: start;
}
@media (max-width: 768px) {
@media (max-width: 992px) {
.secMainFooterInsideTopSecMidInside {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/*grid-template-columns: 1fr 1fr 1fr;*/
grid-gap: 15px;
flex-wrap: wrap;
justify-content: start;
align-items: start;
}
}

View File

@ -176,6 +176,12 @@ h1, h2, h3, h4, h5, h6 {
background: white;
}
@media (max-width: 768px) {
.searchMain {
width: 100%;
}
}
.inputMain {
border-radius: 4px;
border: solid 1px rgba(0,0,0,0.15);

View File

@ -84,22 +84,15 @@
</div>
<div class="secMainBodySecInside_DashboardSec secMainBodySecInside_DashboardSecMid">
<div class="secMainBodySecInside_DashboardSecMidCards">
<div class="secMainBodySecInside_DashboardSecMidCardsWrap"><a class="secMainBodySecInside_DashboardSecMidCardsWrapLink" href="dashboard-draft.html">
<div class="secMainBodySecInside_DashboardSecMidCardsWrap">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLink">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkTop">
<p class="secMainBodySecInside_DashboardSecMidCardsWrapLinkTopText">This is the file's name, and it's such an amazing file name that I can't handle it, like holy mother of nostr, wow.</p>
</div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMid">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidPrimary">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
</div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidPrimary"><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></a></div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidDivider"></div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidSecondary">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOtherFirst" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;" title="Name"></div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidSecondary"><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOtherFirst" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></a>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserNumber">
<p>20</p>
</div>
@ -136,7 +129,7 @@
</div>
</div>
</div>
</a>
</div><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkAlt" href="dashboard-draft.html"></a>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapBtns"><button data-bs-toggle="tooltip" data-bss-tooltip="" class="btnMain secMainBodySecInside_DashboardSecMidCardsWrapBtnsBtn" type="button" title="Duplicate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path d="M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z"></path>
@ -145,42 +138,35 @@
<path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"></path>
</svg></button></div>
</div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrap"><a class="secMainBodySecInside_DashboardSecMidCardsWrapLink" href="dashboard-progress.html">
<div class="secMainBodySecInside_DashboardSecMidCardsWrap">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLink">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkTop">
<p class="secMainBodySecInside_DashboardSecMidCardsWrapLinkTopText">This is the file's name, and</p>
<p class="secMainBodySecInside_DashboardSecMidCardsWrapLinkTopText">This is the file's name, and it's such an amazing file name that I can't handle it, like holy mother of nostr, wow.</p>
</div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMid">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidPrimary">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidPrimary"><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserStatus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"></path>
</svg></div>
</div>
</div>
</a></div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidDivider"></div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidSecondary">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOtherFirst" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidSecondary"><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOtherFirst" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserStatus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"></path>
</svg></div>
</div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
</a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserStatus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"></path>
</svg></div>
</div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
</a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserStatus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"></path>
</svg></div>
</div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></div>
</a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;"></a>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserNumber">
<p>20</p>
</div>
@ -217,7 +203,7 @@
</div>
</div>
</div>
</a>
</div><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkAlt" href="dashboard-draft.html"></a>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapBtns"><button data-bs-toggle="tooltip" data-bss-tooltip="" class="btnMain secMainBodySecInside_DashboardSecMidCardsWrapBtnsBtn" type="button" title="Duplicate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path d="M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z"></path>
@ -226,51 +212,55 @@
<path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z"></path>
</svg></button></div>
</div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrap"><a class="secMainBodySecInside_DashboardSecMidCardsWrapLink" href="dashboard-complete.html">
<div class="secMainBodySecInside_DashboardSecMidCardsWrap">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLink">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkTop">
<p class="secMainBodySecInside_DashboardSecMidCardsWrapLinkTopText">This is the file's name, and it's such an amazing file name that I can't handle it, like holy mother of nostr, wow.</p>
</div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMid">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidPrimary">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidPrimary"><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserStatus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"></path>
</svg></div>
</div>
</div>
</a></div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidDivider"></div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidSecondary">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOtherFirst" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidSecondary"><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOtherFirst" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserStatus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"></path>
</svg></div>
</div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
</a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserStatus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"></path>
</svg></div>
</div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
</a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserStatus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"></path>
</svg></div>
</div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
</a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserStatus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"></path>
</svg></div>
</div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
</a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserStatus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"></path>
</svg></div>
</div>
</a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserStatus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"></path>
</svg></div>
</a><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther" href="#" style="background: url(&quot;assets/img/User%20Profile%20Picture%20Default.png&quot;) center / cover no-repeat;">
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserStatus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"></path>
</svg></div>
</a>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUser secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserOther secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserNumber">
<p>20</p>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkMidUserStatus"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
@ -297,7 +287,7 @@
<path d="M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"></path>
</svg></div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkBottomRowText">
<p>Completed</p>
<p>Completed<br></p>
</div>
</div>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapLinkBottomRow">
@ -311,7 +301,7 @@
</div>
</div>
</div>
</a>
</div><a class="secMainBodySecInside_DashboardSecMidCardsWrapLinkAlt" href="dashboard-draft.html"></a>
<div class="secMainBodySecInside_DashboardSecMidCardsWrapBtns"><button data-bs-toggle="tooltip" data-bss-tooltip="" class="btnMain secMainBodySecInside_DashboardSecMidCardsWrapBtnsBtn" type="button" title="Duplicate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
<path d="M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z"></path>