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="docs">
<div id="upload_file">
<div id="course" class="row h-100">
<div id="docs" class="col-3 pr-3 h-100 flex-column">
<div id="upload_file" class="row">
<div class="custom-file">
<input type="file" class="custom-file-input" id="fileupload" name="files[]" multiple>
<label class="custom-file-label" for="customFile">Choose file</label>
</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>
</div>
<div id="doc_list"></div>
<div id="doc_list_box" class="row"><div id="doc_list"></div></div>
</div>
<div id="notes_box">
<div id="notes_box" class="col-9 h-100">
<div id="notes_feedback"></div>
<div id="notes"></div>
</div>
@@ -85,7 +85,7 @@ oCATC.pageInit = function(asHash, bFirstPage) {
loadDocs();
//Scrollbar
$('#docs, #notes').mCustomScrollbar({
$('#doc_list_box, #notes').mCustomScrollbar({
axis: 'y',
scrollInertia: 0,
autoExpandScrollbar: true,

2
masks/index.html
View File

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

50
masks/template.html
View File

@@ -1,32 +1,36 @@
<div id="feedback"></div>
<div id="header">
<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>
<div id="menu">
<nav class="navbar navbar-expand p-0 justify-content-end">
<form class="container-fluid">
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fa-search"></i></span></div>
<input id="search" class="form-control my-0" type="search" placeholder="Search" aria-label="Search" autocomplete="off" />
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button" id="add_def" data-toggle="modal" data-id="0" data-target="#add-def"><i class="fa-add"></i></button>
<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="logo_box"><a href="#workshops"></a></div>
</div>
<div id="menu" class="col w-50">
<nav class="navbar navbar-expand p-0 justify-content-end">
<form class="container-fluid">
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fa-search"></i></span></div>
<input id="search" class="form-control my-0" type="search" placeholder="Search" aria-label="Search" autocomplete="off" />
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button" id="add_def" data-toggle="modal" data-id="0" data-target="#add-def"><i class="fa-add"></i></button>
</div>
</div>
</div>
<a tabindex="0" class="body btn btn-outline-primary ml-2 my-0" role="button" data-toggle="popover"><i class="fa-body"></i></a>
<button class="sync btn btn-outline-primary ml-2 my-0" type="button" data-toggle="tooltip"><i class="fa-sync"></i></button>
<button class="home btn btn-outline-primary ml-2 my-0" type="button"><i class="fa-home"></i></button>
<button class="logoff btn btn-outline-primary ml-2 my-0" type="button" data-toggle="modal" data-target="#log-off"><i class="fa-logoff"></i></button>
</form>
</nav>
<a tabindex="0" class="body btn btn-outline-primary ml-2 my-0" role="button" data-toggle="popover"><i class="fa-body"></i></a>
<button class="sync btn btn-outline-primary ml-2 my-0" type="button" data-toggle="tooltip"><i class="fa-sync"></i></button>
<button class="home btn btn-outline-primary ml-2 my-0" type="button"><i class="fa-home"></i></button>
<button class="logoff btn btn-outline-primary ml-2 my-0" type="button" data-toggle="modal" data-target="#log-off"><i class="fa-logoff"></i></button>
</form>
</nav>
</div>
</div>
<div id="main_title"><h1></h1></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 class="tag write"><a href="#write" class="fa-write"></a></div>
</div>
<footer>
<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>
<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>
</div>
</footer>
<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">

2
masks/workshop.html
View File

@@ -1,6 +1,6 @@
<div id="workshop" class="container">
<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>
</div>

2
style/_bootstrap.scss
View File

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

74
style/_page_course.scss
View File

@@ -1,40 +1,38 @@
#course {
#docs {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: calc(30% - 1em);
overflow: auto;
#upload_file {
#upload_file {
margin-bottom: 1em;
}
#doc_list {
overflow: auto;
#doc_list_box {
height: calc(100% - 54px);
.doc-item {
&:not(:last-child) {
margin-bottom: 1em;
}
.link {
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
#doc_list {
max-width: 100%;
.doc-item {
&:not(:last-child) {
margin-bottom: 1em;
}
.link {
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
#notes_box {
position: absolute;
width: 70%;
top: 0;
right: 0;
height: 100%;
#notes {
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;
}
#notes_feedback {
position: absolute;
@@ -47,33 +45,13 @@
.alert {
font-size: 0.8em;
margin: 0;
padding: 0.2em 0.5em;
padding: 0 0.5em;
line-height: 27.35px;
&.note-error {
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;
}
.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 */
.ql-container {

151
style/_template.scss
View File

@@ -1,6 +1,5 @@
/* Containers */
body {
min-width: 700px;
font-family: $font_para, sans-serif;
@@ -44,20 +43,6 @@ a:hover {
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 */
a.button {
@@ -94,12 +79,24 @@ a.button:active {
z-index: 1000;
}
/* Containers */
#container {
max-width: 100vw;
max-height: 100vh;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.template-items {
display: none;
}
/* Header */
#header {
position: relative;
height: 138px;
width: 50%;
#logo_box {
width: 100%;
@@ -139,11 +136,7 @@ a.button:active {
/* Menu */
#menu {
position: absolute;
display: none;
top: 0;
right: 0;
width: 50%;
height: 111px;
.navbar {
@@ -165,136 +158,26 @@ a.button:active {
/* Main */
#main_title {
margin-top: 1em;
h1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.5rem;
}
}
#main {
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 {
position: absolute;
bottom: 0;
text-align: center;
color: $gray-400;
font-size: 0.8em;
width: 100%;
height: 2rem;
span {
transform: translateY(-50%);
position: relative;
top: 50%;
a {
color: $gray-400 !important;
}
a {
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