added a file divider in all (draft/progress/complete pages). fixed side columns not being sticky

This commit is contained in:
stitch 2024-07-26 16:45:14 +03:00
parent dcc90d9fd2
commit 681e7241cd
4 changed files with 401 additions and 362 deletions

View File

@ -713,3 +713,19 @@
align-items: center;
}
.filesPageSecMidPreviewInsideDivider {
display: flex;
flex-direction: row;
grid-gap: 10px;
justify-content: center;
align-items: center;
color: rgba(0,0,0,0.15);
font-size: 12px;
}
.filesPageSecMidPreviewInsideDividerLine {
flex-grow: 1;
height: 1px;
background: rgba(0,0,0,0.1);
}

View File

@ -44,6 +44,7 @@
<div class="secMainBodySecInside secMainBodySecInsideFiles">
<div class="filesPage">
<div class="filesPageSec filesPageSecSides">
<div class="filesPageSecSidesWrap">
<div class="filesPageSecSidesWrap">
<div class="filesPageSecSidesSec">
<div class="filesPageSecSidesSecFiles">
@ -91,14 +92,15 @@
</svg>Download Files</button></div>
</div>
</div>
</div>
<div class="filesPageSec filesPageSecMid">
<div class="tabsMain filesPageSecMidTab">
<ul class="nav nav-tabs tabsMainTop filesPageSecMidTabTop" role="tablist" style="/*display: flex;*/">
<li class="nav-item tabsMainTopTab filesPageSecMidTabTopTabTab" role="presentation"><a class="nav-link tabsMainTopTabLink filesPageSecMidTabTabLink" role="tab" data-bs-toggle="tab" href="#tab-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-64 0 512 512" width="1em" height="1em" fill="currentColor">
<li class="nav-item tabsMainTopTab filesPageSecMidTabTopTabTab" role="presentation"><a class="nav-link active tabsMainTopTabLink filesPageSecMidTabTabLink" role="tab" data-bs-toggle="tab" href="#tab-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-64 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="M0 64C0 28.65 28.65 0 64 0H224V128C224 145.7 238.3 160 256 160H384V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V64zM256 128V0L384 128H256z"></path>
</svg></a></li>
<li class="nav-item tabsMainTopTab" role="presentation"><a class="nav-link active tabsMainTopTabLink" role="tab" data-bs-toggle="tab" href="#tab-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor">
<li class="nav-item tabsMainTopTab" role="presentation"><a class="nav-link tabsMainTopTabLink" role="tab" data-bs-toggle="tab" href="#tab-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 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="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z"></path>
</svg></a></li>
@ -108,11 +110,16 @@
</svg></a></li>
</ul>
<div class="tab-content tabsMainBottom">
<div class="tab-pane tabsMainBottomPane" role="tabpanel" id="tab-1">
<div class="tab-pane active tabsMainBottomPane" role="tabpanel" id="tab-1">
<div class="filesPageSecMidWrap">
<div class="filesPageSecMidPreview">
<div class="filesPageSecMidPreviewInside">
<div class="filesPageSecMidPreviewInsideWrap"><img class="filesPageSecMidPreviewInsideWrapImg" src="assets/img/img%20ex.png"><img class="filesPageSecMidPreviewInsideWrapImg" src="assets/img/img%20ex.png"></div>
<div class="filesPageSecMidPreviewInsideDivider">
<div class="filesPageSecMidPreviewInsideDividerLine"></div>
<p>File Seperator</p>
<div class="filesPageSecMidPreviewInsideDividerLine"></div>
</div>
<div class="filesPageSecMidPreviewInsideWrap">
<div class="filesPageSecMidPreviewInsideWrapFile">
<p>This is a zip file</p>
@ -122,7 +129,7 @@
</div>
</div>
</div>
<div class="tab-pane active tabsMainBottomPane filesPageSecMidTabBottomPane" role="tabpanel" id="tab-2">
<div class="tab-pane tabsMainBottomPane filesPageSecMidTabBottomPane" role="tabpanel" id="tab-2">
<div class="filesPageSecMidWrap filesPageSecMidWrapAlt">
<div class="filesPageSecSidesSecInfo">
<div class="filesPageSecSidesSecInfoSec">
@ -259,6 +266,7 @@
</div>
</div>
<div class="filesPageSec filesPageSecSides">
<div class="filesPageSecSidesWrap">
<div class="filesPageSecSidesWrap">
<div class="filesPageSecSidesSec">
<div class="filesPageSecSidesSecInfo">
@ -374,6 +382,7 @@
</div>
</div>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/dashboardTriggers.js"></script>

View File

@ -44,6 +44,7 @@
<div class="secMainBodySecInside secMainBodySecInsideFiles">
<div class="filesPage">
<div class="filesPageSec filesPageSecSides">
<div class="filesPageSecSidesWrap">
<div class="filesPageSecSidesSec">
<div class="filesPageSecSidesSecFiles">
<div class="filesPageSecSidesSecFilesFile filesPageSecSidesSecFilesFileActive">
@ -86,6 +87,7 @@
<path d="M105.4 182.6c12.5 12.49 32.76 12.5 45.25 .001L224 109.3V352c0 17.67 14.33 32 32 32c17.67 0 32-14.33 32-32V109.3l73.38 73.38c12.49 12.49 32.75 12.49 45.25-.001c12.49-12.49 12.49-32.75 0-45.25l-128-128C272.4 3.125 264.2 0 256 0S239.6 3.125 233.4 9.375L105.4 137.4C92.88 149.9 92.88 170.1 105.4 182.6zM480 352h-160c0 35.35-28.65 64-64 64s-64-28.65-64-64H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456z"></path>
</svg>Upload new file<input type="file" class="btnMainInputFile"></button></div>
</div>
</div>
<div class="filesPageSec filesPageSecMid">
<div class="tabsMain filesPageSecMidTab">
<ul class="nav nav-tabs tabsMainTop filesPageSecMidTabTop" role="tablist">
@ -108,6 +110,11 @@
<div class="filesPageSecMidPreview">
<div class="filesPageSecMidPreviewInside">
<div class="filesPageSecMidPreviewInsideWrap"><img class="filesPageSecMidPreviewInsideWrapImg" src="assets/img/img%20ex.png"><img class="filesPageSecMidPreviewInsideWrapImg" src="assets/img/img%20ex.png"></div>
<div class="filesPageSecMidPreviewInsideDivider">
<div class="filesPageSecMidPreviewInsideDividerLine"></div>
<p>File Seperator</p>
<div class="filesPageSecMidPreviewInsideDividerLine"></div>
</div>
<div class="filesPageSecMidPreviewInsideWrap">
<div class="filesPageSecMidPreviewInsideWrapFile">
<p>This is a zip file</p>
@ -373,6 +380,7 @@
</div>
</div>
<div class="filesPageSec filesPageSecSides">
<div class="filesPageSecSidesWrap">
<div class="filesPageSecSidesSec filesPageSecSidesSecAlt">
<div class="filesPageSecSidesSecAlt_Users">
<div class="filesPageSecSidesSecAlt_UsersTop">
@ -575,6 +583,7 @@
</div>
</div>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/dashboardTriggers.js"></script>

View File

@ -117,6 +117,11 @@
<div class="filesPageSecMidPreview">
<div class="filesPageSecMidPreviewInside">
<div class="filesPageSecMidPreviewInsideWrap"><img class="filesPageSecMidPreviewInsideWrapImg" src="assets/img/img%20ex.png"><img class="filesPageSecMidPreviewInsideWrapImg" src="assets/img/img%20ex.png"></div>
<div class="filesPageSecMidPreviewInsideDivider">
<div class="filesPageSecMidPreviewInsideDividerLine"></div>
<p>File Seperator</p>
<div class="filesPageSecMidPreviewInsideDividerLine"></div>
</div>
<div class="filesPageSecMidPreviewInsideWrap">
<div class="filesPageSecMidPreviewInsideWrapFile">
<p>This is a zip file</p>