#175 [CSS] add: Style to quickcreation project frontend

core/tpl/frontend/easycrm_media_editor_frontend.tpl.php

@@ -17,23 +17,25 @@
             </div>
             <!-- Modal-ADD Image Content-->
             <div class="modal-content" id="#modalContent" style="height: 75%;">
-                <canvas id="canvas" style="height: 98%; width: 100%; border: #0b419b solid 2px"></canvas>
+                <div class="canvas-container">
+                    <canvas id="canvas" style="border: #0b419b solid 2px"></canvas>
+                </div>
             </div>
             <!-- Modal-Footer-->
             <div class="modal-footer">
-                <div class="image-rotate-left wpeo-button button-grey" style="font-size: 30px;">
+                <div class="image-rotate-left wpeo-button button-grey button-square-50">
                     <span><i class="fas fa-undo-alt"></i></span>
                 </div>
-                <div class="image-rotate-right wpeo-button button-grey" style="font-size: 30px;">
+                <div class="image-rotate-right wpeo-button button-grey button-square-50">
                     <span><i class="fas fa-redo-alt"></i></span>
                 </div>
-                <div class="image-undo wpeo-button button-grey" style="font-size: 30px;">
+                <div class="image-undo wpeo-button button-grey button-square-50">
                     <span><i class="fas fa-undo-alt"></i></span>
                 </div>
-                <div class="image-erase wpeo-button button-grey" style="font-size: 30px;">
+                <div class="image-erase wpeo-button button-grey button-square-50">
                     <span><i class="fas fa-eraser"></i></span>
                 </div>
-                <div class="image-validate wpeo-button button-primary" style="font-size: 30px;" value="0">
+                <div class="image-validate wpeo-button button-primary button-square-50" value="0">
                     <span><i class="fas fa-check"></i></span>
                 </div>
             </div>

core/tpl/frontend/easycrm_project_quickcreation_frontend.tpl.php

@@ -45,7 +45,7 @@
                 <div class="wpeo-button button-square-50">
                     <i class="fas fa-camera"></i><i class="fas fa-plus-circle button-add"></i>
                 </div>
-                <?php print saturne_show_medias_linked('easycrm', $conf->easycrm->multidir_output[$conf->entity] . '/project/tmp/0/project_photos', 'small', '', 0, 0, 0, 50, 50, 0, 0, 0, 'project/tmp/0/project_photos', $project, '', 0, 0, 0, 0, '', 0); ?>
+                <?php print saturne_show_medias_linked('easycrm', $conf->easycrm->multidir_output[$conf->entity] . '/project/tmp/0/project_photos', 'small', '', 0, 0, 0, 50, 50, 0, 0, 0, 'project/tmp/0/project_photos', $project, '', 0, 1, 0, 0, ''); ?>
             </div>
         </label>
     </div>

css/scss/element/_element.scss

@@ -0,0 +1 @@
+@import "form";

css/scss/element/_form.scss

@@ -0,0 +1,22 @@
+form {
+    input, select, textarea {
+        background: #fff;
+    }
+
+    select.widthcentpercentminusx, span.widthcentpercentminusx:not(.select2-selection):not(.select2-dropdown), input.widthcentpercentminusx {
+        width: 100% !important;
+        margin-bottom: 2em;
+
+        .select2-container--default, .select2-selection--multiple {
+            --border-color: var(--form-element-border-color);
+            width: 100%;
+            border:var(--border-width) solid var(--border-color);
+            border-radius:var(--border-radius);
+            outline:0;
+
+            input {
+                margin: 0;
+            }
+        }
+    }
+}

css/scss/layout/_body.scss

@@ -0,0 +1,20 @@
+.fiche {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+form {
+    margin: 0;
+}
+
+.project-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+.page-content {
+    background: #F7F7F7;
+    padding: 1rem;
+    height: calc( 100% - 160px);
+    overflow: auto;
+}

css/scss/layout/_footer.scss

@@ -0,0 +1,8 @@
+.page-footer {
+    height: 80px;
+    padding: 1rem;
+
+    button {
+        margin: 0;
+    }
+}

css/scss/layout/_header.scss

@@ -0,0 +1,10 @@
+.page-header {
+    background: #fff;
+    padding: 2rem 1rem 0rem 1rem;
+    border-bottom: 2px solid #D8D8D8;
+    height: 80px;
+
+    .page-title {
+        font-weight: 700;
+    }
+}

css/scss/layout/_layout.scss

@@ -0,0 +1,3 @@
+@import "header";
+@import "body";
+@import "footer";

css/scss/pages/_linked-medias.scss

@@ -0,0 +1,18 @@
+.linked-medias-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5em;
+
+    .wpeo-button {
+    }
+    .media-container {
+        margin-right: 0 !important;
+        width: 50px;
+        height: 50px;
+
+        img {
+            object-fit: cover;
+            height: 50px;
+        }
+    }
+}

css/scss/pages/_modal-edit-image.scss

@@ -0,0 +1,26 @@
+.wpeo-modal {
+    .modal-container {
+        max-height: none;
+        padding-left: 0;
+        padding-right: 0;
+
+        .canvas-container {
+            display: flex;
+            margin: auto;
+            width: 100%;
+            height: 100%;
+            justify-content: center;
+
+        }
+        canvas {
+            object-fit: contain;
+            width: 600px;
+            height: 800px;
+
+            @media ( max-width: $media__small ) {
+                width: 300px;
+                height: 400px;
+            }
+        }
+    }
+}

css/scss/pages/_pages.scss

@@ -0,0 +1,2 @@
+@import "linked-medias";
+@import "modal-edit-image";

css/scss/style.scss

@@ -0,0 +1,4 @@
+@import "variables/variables";
+@import "layout/layout"; 
+@import "element/element"; 
+@import "pages/pages"; 

css/scss/variables/_colors.scss

@@ -0,0 +1 @@
+$color__primary: var(--primary);

css/scss/variables/_structure.scss

@@ -0,0 +1,4 @@
+$media__large: 1200px;
+$media__medium: 992px;
+$media__small: 768px;
+$media__extra-small: 576px;

css/scss/variables/_variables.scss

@@ -0,0 +1,2 @@
+@import "colors";
+@import "structure";

gulpfile.js

@@ -7,17 +7,17 @@ const uglify = require('gulp-uglify');
 const concat = require('gulp-concat');
 
 const paths = {
-	//scss_core: ['css/scss/**/*.scss', 'css/'],
+	scss_core: ['css/scss/**/*.scss', 'css/'],
 	js_backend: ['js/easycrm.js', 'js/modules/*.js']
 };
 
 /** Core */
-// gulp.task('scss_core', function() {
-// 	return gulp.src(paths.scss_core[0])
-// 		.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
-// 		.pipe(rename('./easycrm.min.css'))
-// 		.pipe(gulp.dest(paths.scss_core[1]));
-// });
+ gulp.task('scss_core', function() {
+ 	return gulp.src(paths.scss_core[0])
+ 		.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
+ 		.pipe(rename('./easycrm.min.css'))
+ 		.pipe(gulp.dest(paths.scss_core[1]));
+ });
 
 gulp.task('js_backend', function() {
 	return gulp.src(paths.js_backend)
@@ -28,6 +28,6 @@ gulp.task('js_backend', function() {
 
 /** Watch */
 gulp.task('default', function() {
-	//gulp.watch(paths.scss_core[0], gulp.series('scss_core'));
+	gulp.watch(paths.scss_core[0], gulp.series('scss_core'));
 	gulp.watch(paths.js_backend[1], gulp.series('js_backend'));
 });