franzz/catc
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

extend use of bootstrap to whole page

Browse Source
This commit is contained in:
Franzz
2019-10-10 19:57:56 +02:00
parent 07b951ec00
commit 8075bc805a
10 changed files with 96 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
masks/course.html
View File

@@ -1,17 +1,17 @@
<div id="course"> <div id="course" class="row h-100">
<div id="docs"> <div id="docs" class="col-3 pr-3 h-100 flex-column">
<div id="upload_file"> <div id="upload_file" class="row">
<div class="custom-file"> <div class="custom-file">
<input type="file" class="custom-file-input" id="fileupload" name="files[]" multiple> <input type="file" class="custom-file-input" id="fileupload" name="files[]" multiple>
<label class="custom-file-label" for="customFile">Choose file</label> <label class="custom-file-label" for="customFile">Choose file</label>
</div> </div>
<div id="upload_progress" class="progress mt-2 hidden transition"> <div id="upload_progress" class="w-100 progress mt-2 hidden transition">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
</div> </div>
<div id="doc_list"></div> <div id="doc_list_box" class="row"><div id="doc_list"></div></div>
</div> </div>
<div id="notes_box"> <div id="notes_box" class="col-9 h-100">
<div id="notes_feedback"></div> <div id="notes_feedback"></div>
<div id="notes"></div> <div id="notes"></div>
</div> </div>
@@ -85,7 +85,7 @@ oCATC.pageInit = function(asHash, bFirstPage) {
loadDocs(); loadDocs();
//Scrollbar //Scrollbar
$('#docs, #notes').mCustomScrollbar({ $('#doc_list_box, #notes').mCustomScrollbar({
axis: 'y', axis: 'y',
scrollInertia: 0, scrollInertia: 0,
autoExpandScrollbar: true, autoExpandScrollbar: true,

2
masks/index.html
View File

@@ -19,6 +19,6 @@
</script> </script>
</head> </head>
<body> <body>
<div id="container"></div> <div id="container" class="container px-3 pt-3 m-0 d-flex flex-column"></div>
</body> </body>
</html> </html>

14
masks/template.html
View File

@@ -1,9 +1,10 @@
<div id="feedback"></div> <div id="feedback"></div>
<div id="header"> <div class="row">
<div id="header" class="col w-50">
<div id="desc_box"><div class="desc">Collège des <span>arts thérapeutiques chinois</span></div></div> <div id="desc_box"><div class="desc">Collège des <span>arts thérapeutiques chinois</span></div></div>
<div id="logo_box"><a href="#workshops"></a></div> <div id="logo_box"><a href="#workshops"></a></div>
</div> </div>
<div id="menu"> <div id="menu" class="col w-50">
<nav class="navbar navbar-expand p-0 justify-content-end"> <nav class="navbar navbar-expand p-0 justify-content-end">
<form class="container-fluid"> <form class="container-fluid">
<div class="input-group"> <div class="input-group">
@@ -20,13 +21,16 @@
</form> </form>
</nav> </nav>
</div> </div>
<div id="main_title"><h1></h1></div> </div>
<div id="main"></div> <div id="main_title" class="row py-3"><h1 class="m-0"></h1></div>
<div class="row mt-3 overflow-auto flex-fill d-flex justify-content-center"><div id="main" class="col h-100"></div></div>
<div id="side"> <div id="side">
<div class="tag write"><a href="#write" class="fa-write"></a></div> <div class="tag write"><a href="#write" class="fa-write"></a></div>
</div> </div>
<footer> <footer class="row">
<div class="col">
<span>Designed and powered by Franzz &amp; Clarita - CATC Notes Project under <a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GPLv3</a> License</span> <span>Designed and powered by Franzz &amp; Clarita - CATC Notes Project under <a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GPLv3</a> License</span>
</div>
</footer> </footer>
<div id="add-def" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add_def_title" aria-hidden="true"> <div id="add-def" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add_def_title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">

2
masks/workshop.html
View File

@@ -1,6 +1,6 @@
<div id="workshop" class="container"> <div id="workshop" class="container">
<div class="row"> <div class="row">
<div class="col-auto"><button type="button" class="back btn btn-primary"><i class="fa-previous"></i></button></div> <div class="col-auto pr-3"><button type="button" class="back btn btn-primary"><i class="fa-previous"></i></button></div>
<div class="col"><div id="course-list" class="list-group"></div></div> <div class="col"><div id="course-list" class="list-group"></div></div>
</div> </div>
</div> </div>

2
style/_bootstrap.scss
View File

@@ -17,6 +17,8 @@ $theme-colors: map-remove($theme-colors, "light", "dark");
$font-family-base: $font_para; $font-family-base: $font_para;
$grid-gutter-width: 0;
@import 'bootstrap/bootstrap'; @import 'bootstrap/bootstrap';
.alert-error { .alert-error {

50
style/_page_course.scss
View File

@@ -1,19 +1,14 @@
#course { #course {
#docs { #docs {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: calc(30% - 1em);
overflow: auto;
#upload_file { #upload_file {
margin-bottom: 1em; margin-bottom: 1em;
} }
#doc_list_box {
height: calc(100% - 54px);
#doc_list { #doc_list {
overflow: auto; max-width: 100%;
.doc-item { .doc-item {
&:not(:last-child) { &:not(:last-child) {
@@ -28,13 +23,16 @@
} }
} }
} }
}
#notes_box { #notes_box {
position: absolute; #notes {
width: 70%; height: calc(100% - 27.35px);
top: 0; border: 2px solid $gray-400;
right: 0; border-radius: 0 0 5px 5px;
height: 100%; padding: 1em 0.5em 1em 0;
background: $gray-200;
}
#notes_feedback { #notes_feedback {
position: absolute; position: absolute;
@@ -47,33 +45,13 @@
.alert { .alert {
font-size: 0.8em; font-size: 0.8em;
margin: 0; margin: 0;
padding: 0.2em 0.5em; padding: 0 0.5em;
line-height: 27.35px;
&.note-error { &.note-error {
color: $col_main_2; color: $col_main_2;
} }
} }
} }
.ql-toolbar.ql-snow {
border-radius: 5px 5px 0 0;
background: $gray-400;
padding: 0;
border: 2px solid #dbd1cc;
border-bottom: none;
.ql-color-picker .ql-picker-label, .ql-icon-picker .ql-picker-label {
margin-top: -3px;
}
}
#notes {
width: 100%;
height: calc(100% - 27.35px);
border: 2px solid $gray-400;
border-radius: 0 0 5px 5px;
padding: 1em 0.5em 1em 0;
background: $gray-200;
}
} }
} }

12
style/_quill.scss
View File

@@ -41,6 +41,18 @@
fill: $col_main_1; fill: $col_main_1;
} }
.ql-toolbar.ql-snow {
border-radius: 5px 5px 0 0;
background: $gray-400;
padding: 0;
border: 2px solid #dbd1cc;
border-bottom: none;
.ql-color-picker .ql-picker-label, .ql-icon-picker .ql-picker-label {
margin-top: -3px;
}
}
/* Quill Better Table */ /* Quill Better Table */
.ql-container { .ql-container {

149
style/_template.scss
View File

@@ -1,6 +1,5 @@
/* Containers */ /* Containers */
body { body {
min-width: 700px; min-width: 700px;
font-family: $font_para, sans-serif; font-family: $font_para, sans-serif;
@@ -44,20 +43,6 @@ a:hover {
border-radius: 0 $radius $radius $radius; border-radius: 0 $radius $radius $radius;
} }
/* Common Classes - Containers */
#container {
position: absolute;
left: 1em;
right: 1em;
top: 1em;
bottom: 1em;
}
.template-items {
display: none;
}
/* Common Classes - Inputs */ /* Common Classes - Inputs */
a.button { a.button {
@@ -94,12 +79,24 @@ a.button:active {
z-index: 1000; z-index: 1000;
} }
/* Containers */
#container {
max-width: 100vw;
max-height: 100vh;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.template-items {
display: none;
}
/* Header */ /* Header */
#header { #header {
position: relative;
height: 138px; height: 138px;
width: 50%;
#logo_box { #logo_box {
width: 100%; width: 100%;
@@ -139,11 +136,7 @@ a.button:active {
/* Menu */ /* Menu */
#menu { #menu {
position: absolute;
display: none; display: none;
top: 0;
right: 0;
width: 50%;
height: 111px; height: 111px;
.navbar { .navbar {
@@ -165,136 +158,26 @@ a.button:active {
/* Main */ /* Main */
#main_title { #main_title {
margin-top: 1em;
h1 { h1 {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 1.5rem;
} }
} }
#main { #main {
display: none; display: none;
position: absolute;
top: calc(138px + 6em);
bottom: 2rem;
right:0;
left:0;
padding: 1em;
overflow: auto;
}
/* Side */
#side {
position: absolute;
left: 100%;
top: 203px;
padding: 1em;
bottom: 2rem;
overflow: hidden;
display: none;
.tag {
margin-bottom: 1em;
a {
@extend .shadow;
display: inline-block;
text-align: center;
width: 50px;
background: $gray-200;
border-radius: 0.5em;
font-size: 0.8rem;
line-height: 25px;
&:hover {
color: $gray-200;
background: $gray-400;
}
}
&.write a {
font-size: 1rem;
padding: 0;
line-height: 50px;
}
}
}
/* Settings */
#settings table tr td {
text-align:left;
}
/* Errors */
#errors {
position:fixed;
bottom:-2px;
background-color:white;
width:696px;
border:2px solid red;
}
#errors ul li {
list-style-image: url(../images/error.png);
color:red;
font-weight: bold;
font-size:24px;
}
fieldset {
margin:20px auto;
width:90%;
}
fieldset p {
text-align: justify;
}
/* Feedback */
.notice {
padding:0;
color:#997E60;
}
.error {
padding:0 0.5em;
color: red;
background:#FFB2B2;
}
.warning {
padding:0 0.5em;
color:orange;
background:#FFE4B2;
}
.success {
padding:0 0.5em;
color:green;
background:#B2D9B2;
} }
/* Footer */ /* Footer */
footer { footer {
position: absolute;
bottom: 0;
text-align: center; text-align: center;
color: $gray-400; color: $gray-400;
font-size: 0.8em; font-size: 0.8em;
width: 100%;
height: 2rem;
span {
transform: translateY(-50%);
position: relative;
top: 50%;
a { a {
color: $gray-400 !important; color: $gray-400;
}
} }
} }

4
style/catc.css
View File

File diff suppressed because one or more lines are too long

2
style/catc.css.map
View File

File diff suppressed because one or more lines are too long