diff --git a/Seenginx/Components/FilesWithEditor.razor b/Seenginx/Components/FilesWithEditor.razor index 067ccbd..7190e85 100644 --- a/Seenginx/Components/FilesWithEditor.razor +++ b/Seenginx/Components/FilesWithEditor.razor @@ -54,8 +54,8 @@ } -
-
+
+
@foreach (var file in Files) {
@@ -70,7 +70,7 @@ @if (IsAnyFileSelected) {
- +
} else diff --git a/Seenginx/SCSS/template.scss b/Seenginx/SCSS/template.scss index a0d0ecb..80f51b8 100644 --- a/Seenginx/SCSS/template.scss +++ b/Seenginx/SCSS/template.scss @@ -26,7 +26,9 @@ grid-template-areas: "filterFiles fileTitle" "files codeEditor" "filesActions editorActions"; grid-gap: 20px; height: 100%; - grid-template-rows: 30px calc(100% - 60px) 30px; + max-height: 100%; + min-height: 10%; + grid-template-rows: 30px auto 30px; grid-template-columns: 30% auto; & .filterFiles { @@ -39,18 +41,21 @@ & .files { grid-area: files; - display: flex; - flex-flow: row; - height: 100%; + display: block; + min-height: 10%; & .confFile { padding: 4% 6%; - margin-bottom: 2%; + margin-bottom: 3%; } } & .codeEditor { - grid-area: codeEditor + grid-area: codeEditor; + + & .textarea { + height: 100%; + } } & .filesActions { @@ -63,12 +68,13 @@ } .files { - display: flex; - flex-direction: column; - align-items: stretch; &List { + display: flex; + flex-direction: column; + align-items: stretch; height: 100%; + min-height: 10%; width: 100%; padding: 8%; overflow-y: auto; diff --git a/Seenginx/SCSS/utility.scss b/Seenginx/SCSS/utility.scss index 42737fc..ab2c935 100644 --- a/Seenginx/SCSS/utility.scss +++ b/Seenginx/SCSS/utility.scss @@ -89,7 +89,7 @@ } &.isSelected { - box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5); + box-shadow: inset 3px 3px 6px rgba($dark-shadow, .5),inset -3px -3px 6px rgba($light-shadow, .5); } } } diff --git a/Seenginx/wwwroot/css/main.css b/Seenginx/wwwroot/css/main.css index ea04225..0d13b0a 100644 --- a/Seenginx/wwwroot/css/main.css +++ b/Seenginx/wwwroot/css/main.css @@ -94,7 +94,7 @@ html { .neoFile:hover { box-shadow: -3px -3px 6px rgba(251, 238, 208, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5); } .neoFile.isSelected { - box-shadow: -3px -3px 6px rgba(251, 238, 208, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5); } + box-shadow: inset 3px 3px 6px rgba(241, 185, 65, 0.5), inset -3px -3px 6px rgba(251, 238, 208, 0.5); } .gradientBackground { background: linear-gradient(to right bottom, #f7d794, #f5cd79); } @@ -161,7 +161,9 @@ html { grid-template-areas: "filterFiles fileTitle" "files codeEditor" "filesActions editorActions"; grid-gap: 20px; height: 100%; - grid-template-rows: 30px calc(100% - 60px) 30px; + max-height: 100%; + min-height: 10%; + grid-template-rows: 30px auto 30px; grid-template-columns: 30% auto; } .filesWithEditor .filterFiles { grid-area: filterFiles; } @@ -169,25 +171,26 @@ html { grid-area: fileTitle; } .filesWithEditor .files { grid-area: files; - display: flex; - flex-flow: row; - height: 100%; } + display: block; + min-height: 10%; } .filesWithEditor .files .confFile { padding: 4% 6%; - margin-bottom: 2%; } + margin-bottom: 3%; } .filesWithEditor .codeEditor { grid-area: codeEditor; } + .filesWithEditor .codeEditor .textarea { + height: 100%; } .filesWithEditor .filesActions { grid-area: filesActions; } .filesWithEditor .editorActions { grid-area: editorActions; } -.files { +.filesList { display: flex; flex-direction: column; - align-items: stretch; } - .filesList { - height: 100%; - width: 100%; - padding: 8%; - overflow-y: auto; } + align-items: stretch; + height: 100%; + min-height: 10%; + width: 100%; + padding: 8%; + overflow-y: auto; } diff --git a/Seenginx/wwwroot/css/main.min.css b/Seenginx/wwwroot/css/main.min.css index db2b7c3..1d4c2fa 100644 --- a/Seenginx/wwwroot/css/main.min.css +++ b/Seenginx/wwwroot/css/main.min.css @@ -1 +1 @@ -#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;}html{scrollbar-color:#f1b941 #fbeed0;scrollbar-width:thin;scrollbar-arrow-color:#fbeed0;scrollbar-base-color:#f6d287;scrollbar-darkshadow-color:#f1b941;}*{scrollbar-width:inherit;}.isHidden{display:none;}@media only screen and (max-width:37.5em){.isHiddenMobile{display:none;}}.petiteCaps{font-variant:petite-caps;}.flexCenter{display:flex;align-content:center;align-items:center;}.noBottomMargin{margin-bottom:0 !important;}.isNoWrap{white-space:nowrap;}.isFinger{cursor:pointer;}.neomorph{box-shadow:-8px -8px 16px rgba(251,238,208,.5),8px 8px 16px rgba(241,185,65,.5);}.neomorphSmall{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);}.neomorphBottom{filter:drop-shadow(8px 8px 14px #f1b941);}.neomorphInset{box-shadow:inset 8px 8px 16px rgba(241,185,65,.5),inset -8px -8px 16px rgba(251,238,208,.5);}.neomorphInsetSmall{box-shadow:inset 6px 6px 12px rgba(241,185,65,.5),inset -6px -6px 12px rgba(251,238,208,.5);}.neoBtn{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);background:none !important;border:none !important;transition:all .2s linear;-webkit-backface-visibility:hidden;backface-visibility:hidden;}.neoBtn:focus{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5) !important;}.neoBtn:hover{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);background:none !important;border:none !important;transform:scale(1.1);}.neoFile{box-shadow:0 0 0 rgba(251,238,208,.5),0 0 0 rgba(241,185,65,.5);transition:all .2s linear;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#f6d287;}.neoFile:hover{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);}.neoFile.isSelected{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);}.gradientBackground{background:linear-gradient(to right bottom,#f7d794,#f5cd79);}.borderR{border-radius:14px;}.borderRSmall{border-radius:7px;}.borderRBig{border-radius:28px;}.bg{background:#f6d287;}.sameMarginBottom{margin-bottom:1rem !important;}@font-face{font-family:'Ubuntu';src:url(/fonts/ubuntu-light-webfont.woff2) format("woff2");font-weight:300;font-style:normal;}@font-face{font-family:'Ubuntu-Mono';src:url(/fonts/ubuntumono-regular-webfont.woff2) format("woff2");font-style:normal;}html{font-family:Ubuntu,sans-serif;}.pure-menu-heading{text-transform:none;font-family:Ubuntu-Mono,'Noto Mono';}.menu-list li a{font-family:Ubuntu-Mono,'Noto Mono';}.menu-list a.active{background-color:#3273dc;color:#fff;}.main{display:flex;flex-wrap:nowrap;align-items:start;width:100%;height:100vh;padding:2.5%;}.mainNav{overflow-y:auto;padding:14px;width:17%;margin-right:40px;}.mainPage{overflow-y:auto;padding:28px;width:calc(83% - 40px);align-self:stretch;}.filesWithEditor{display:grid;grid-template-areas:"filterFiles fileTitle" "files codeEditor" "filesActions editorActions";grid-gap:20px;height:100%;grid-template-rows:30px calc(100% - 60px) 30px;grid-template-columns:30% auto;}.filesWithEditor .filterFiles{grid-area:filterFiles;}.filesWithEditor .fileTitle{grid-area:fileTitle;}.filesWithEditor .files{grid-area:files;display:flex;flex-flow:row;height:100%;}.filesWithEditor .files .confFile{padding:4% 6%;margin-bottom:2%;}.filesWithEditor .codeEditor{grid-area:codeEditor;}.filesWithEditor .filesActions{grid-area:filesActions;}.filesWithEditor .editorActions{grid-area:editorActions;}.files{display:flex;flex-direction:column;align-items:stretch;}.filesList{height:100%;width:100%;padding:8%;overflow-y:auto;} \ No newline at end of file +#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;}html{scrollbar-color:#f1b941 #fbeed0;scrollbar-width:thin;scrollbar-arrow-color:#fbeed0;scrollbar-base-color:#f6d287;scrollbar-darkshadow-color:#f1b941;}*{scrollbar-width:inherit;}.isHidden{display:none;}@media only screen and (max-width:37.5em){.isHiddenMobile{display:none;}}.petiteCaps{font-variant:petite-caps;}.flexCenter{display:flex;align-content:center;align-items:center;}.noBottomMargin{margin-bottom:0 !important;}.isNoWrap{white-space:nowrap;}.isFinger{cursor:pointer;}.neomorph{box-shadow:-8px -8px 16px rgba(251,238,208,.5),8px 8px 16px rgba(241,185,65,.5);}.neomorphSmall{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);}.neomorphBottom{filter:drop-shadow(8px 8px 14px #f1b941);}.neomorphInset{box-shadow:inset 8px 8px 16px rgba(241,185,65,.5),inset -8px -8px 16px rgba(251,238,208,.5);}.neomorphInsetSmall{box-shadow:inset 6px 6px 12px rgba(241,185,65,.5),inset -6px -6px 12px rgba(251,238,208,.5);}.neoBtn{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);background:none !important;border:none !important;transition:all .2s linear;-webkit-backface-visibility:hidden;backface-visibility:hidden;}.neoBtn:focus{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5) !important;}.neoBtn:hover{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);background:none !important;border:none !important;transform:scale(1.1);}.neoFile{box-shadow:0 0 0 rgba(251,238,208,.5),0 0 0 rgba(241,185,65,.5);transition:all .2s linear;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#f6d287;}.neoFile:hover{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);}.neoFile.isSelected{box-shadow:inset 3px 3px 6px rgba(241,185,65,.5),inset -3px -3px 6px rgba(251,238,208,.5);}.gradientBackground{background:linear-gradient(to right bottom,#f7d794,#f5cd79);}.borderR{border-radius:14px;}.borderRSmall{border-radius:7px;}.borderRBig{border-radius:28px;}.bg{background:#f6d287;}.sameMarginBottom{margin-bottom:1rem !important;}@font-face{font-family:'Ubuntu';src:url(/fonts/ubuntu-light-webfont.woff2) format("woff2");font-weight:300;font-style:normal;}@font-face{font-family:'Ubuntu-Mono';src:url(/fonts/ubuntumono-regular-webfont.woff2) format("woff2");font-style:normal;}html{font-family:Ubuntu,sans-serif;}.pure-menu-heading{text-transform:none;font-family:Ubuntu-Mono,'Noto Mono';}.menu-list li a{font-family:Ubuntu-Mono,'Noto Mono';}.menu-list a.active{background-color:#3273dc;color:#fff;}.main{display:flex;flex-wrap:nowrap;align-items:start;width:100%;height:100vh;padding:2.5%;}.mainNav{overflow-y:auto;padding:14px;width:17%;margin-right:40px;}.mainPage{overflow-y:auto;padding:28px;width:calc(83% - 40px);align-self:stretch;}.filesWithEditor{display:grid;grid-template-areas:"filterFiles fileTitle" "files codeEditor" "filesActions editorActions";grid-gap:20px;height:100%;max-height:100%;min-height:10%;grid-template-rows:30px auto 30px;grid-template-columns:30% auto;}.filesWithEditor .filterFiles{grid-area:filterFiles;}.filesWithEditor .fileTitle{grid-area:fileTitle;}.filesWithEditor .files{grid-area:files;display:block;min-height:10%;}.filesWithEditor .files .confFile{padding:4% 6%;margin-bottom:3%;}.filesWithEditor .codeEditor{grid-area:codeEditor;}.filesWithEditor .codeEditor .textarea{height:100%;}.filesWithEditor .filesActions{grid-area:filesActions;}.filesWithEditor .editorActions{grid-area:editorActions;}.filesList{display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:10%;width:100%;padding:8%;overflow-y:auto;} \ No newline at end of file