Fix gallery bugs

static/up.css

@@ -147,69 +147,61 @@
   }
 }
 
-/* ######### Animations ######### */
-
-#darkbox { width:1280px;
-           height:720px;
-           position:absolute;
-	   top:0;
-           left:0;
-           background-color:#333;
-           overflow: hidden;
-           text-align:center;
-           margin-top: 7%;
-	 }
-.darkboximg { padding:0; max-width: 1216px; max-height: 684px;}
 
 #gallery {
-  line-height:0;
+    margin-top: 10vw;
-  -webkit-column-count:5;
+    display: flex;
-  -webkit-column-gap:5px;
+    flex-wrap: wrap;
-  -moz-column-count:5;
-  -moz-column-gap:5px;
-  column-count:5;
-  column-gap:5px;
-  margin-top:2rem;
 }
 
-#gallery img {
+.item{
-  width: 100% !important;
+    margin-bottom: 1vw;
-  height: auto !important;
-  margin-bottom:5px;
-  filter: grayscale(100%);
-  transition: filter 1s;
 }
 
-#gallery img:hover {
+.item img{
-  filter:none;
+    width: 20vw;
-  transform: scale(1.2);
+    display:flex;
+    flex-wrap:wrap;
 }
 
-@media (max-width: 1200px) {
+
-  #gallery {
+.row {
-    -moz-column-count:    4;
+  display: flex;
-    -webkit-column-count: 4;
+  flex-wrap: wrap;
-    column-count:         4;
+  padding: 0 4px;
+}
+
+.control{
+    display:block;
+    position:inherit;
+  
+}
+
+/* Create four equal columns that sits next to each other */
+.column {
+  flex: 30%;
+  max-width: 30%;
+  padding: 0 4px;
+ 
+}
+
+.column img {
+  margin-top: 8px;
+  vertical-align: middle;
+}
+
+/* Responsive layout - makes a two column-layout instead of four columns */
+@media (max-width: 850px) {
+  .column {
+    flex: 50%;
+    max-width: 50%;
   }
 }
-@media (max-width: 1000px) {
+
-  #gallery {
+/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
-    -moz-column-count:    3;
+@media (max-width: 600px) {
-    -webkit-column-count: 3;
+  .column {
-    column-count:         3;
+    flex: 100%;
-  }
+    max-width: 100%;
-}
-@media (max-width: 800px) {
-  #gallery {
-    -moz-column-count:    2;
-    -webkit-column-count: 2;
-    column-count:         2;
-  }
-}
-@media (max-width: 400px) {
-  #gallery {
-    -moz-column-count:    1;
-    -webkit-column-count: 1;
-    column-count:         1;
   }
 }

templates/_head.html

@@ -4,7 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
-    <link rel="icon" href="../../favicon.ico">
+    <link rel="icon" href="{{ url_for('static', filename='bootstrap.min.css') }}">
 
     <title>Un serveur et des ...</title>
     <!-- Bootstrap core CSS -->

templates/gallery.html

@@ -7,20 +7,29 @@
 
 <br />
 
-<div id="gallery center" style= "margin-top:10vw;">
+<div class="center row">
 {% if fichiers %}
 
 
    
 {% for image in fichiers %}
-<a href="/myfiles/images/{{ image }}" class="glightbox">
+<div class="column">
-       <img src="/myfiles/images/thumbnails/{{ image }}" class="img-rounded gallery" alt=""/>
+  <a href="/myfiles/images/{{ image }}" class="glightbox">
-</a>
+    <img src="/myfiles/images/thumbnails/{{ image }}" class="img-rounded gallery" alt=""/>
+  </a>
+  
+  <div class="control">
+   <a href="{{ url_for('mygallery.remove_privateImage', filename=image) }}"> <button class="btn btn-danger "><span class="glyphicon glyphicon-trash"></span> </button></a>
+   <!-- <button class="btn btn-success "><span class="glyphicon glyphicon-globe"></span></button> -->
+  </div>
+</div>
+
     {% endfor %}
 
+
 {% else %}
 
-       <h2> Il n'y a aucunes images dans votre gallerie </h2>
+<h2> Il n'y a aucunes images dans votre gallerie </h2>
        
    
     

views/filesupload.py

@@ -171,18 +171,6 @@ def remove_privateFile(filename):
     else :
        return redirect(BASE_URL, code=401)
    
-@filesupload.route('/remove_privateImage/<filename>')
-def remove_privateImage(filename):
-    if 'username' in session :
-        user = '%s' % escape(session['username'])
-        filename = secure_filename(filename)    
-        try:
-            os.remove(DOSSIER_PERSO + user + '/images/thumbnails/' + filename) # on le supprime
-            os.remove(DOSSIER_PERSO + user + '/images/' + filename) # on le supprime
-        except FileNotFoundError:
-            flash(u'Image {filename} inexistante.'.format(filename=filename), 'error')
-        return redirect(url_for('gallery'))
-              
     
 @filesupload.route('/remove_publicFile/<filename>')
 def remove_publicFile(filename):
@@ -196,15 +184,3 @@ def remove_publicFile(filename):
         return redirect(url_for('filesupload.list', _external=True))
     else :
        return redirect(BASE_URL, code=401)
-
-@filesupload.route('/remove_publicImage/<filename>')
-def remove_publicImage(filename):
-    if 'username' in session :
-        user = '%s' % escape(session['username'])
-        filename = secure_filename(filename)    
-        try:
-            os.remove(DOSSIER_PUBLIC + user + '/images/thumbnails/' + filename) # on le supprime
-            os.remove(DOSSIER_PUBLIC + user + '/images/' + filename) # on le supprime
-        except FileNotFoundError:
-            flash(u'Image {filename} inexistante.'.format(filename=filename), 'error')
-        return redirect(url_for('gallery'))

views/gallery.py

@@ -15,14 +15,14 @@ app = Flask( 'pywallter' )
 app.config.from_pyfile('config.py')
 
 
-#### Variables ####################################################################################
+#### Variables ##################################################################################
 
 DOSSIER_PERSO= app.config['DOSSIER_APP']
 DOSSIER_PUBLIC= app.config['DOSSIER_PUBLIC']+'/'
 extensionimg = app.config['EXT_IMG']
 
 DATABASE = app.config['DATABASE']
-##################################################################################################
+#################################################################################################
 
 @mygallery.route( '/gallery/')
 def gallery():
@@ -58,3 +58,28 @@ def mythumbnails(filename):
             os.path.join(DOSSIER_PERSO, UTILISATEUR, 'images/thumbnails'), filename )
     else :
         return redirect(BASE_URL, code=401)
+
+@mygallery.route('/remove_privateImage/<filename>')
+def remove_privateImage(filename):
+    if 'username' in session :
+        user = '%s' % escape(session['username'])
+        filename = secure_filename(filename)    
+        try:
+            os.remove(DOSSIER_PERSO + user + '/images/thumbnails/' + filename) # on le supprime
+            os.remove(DOSSIER_PERSO + user + '/images/' + filename) # on le supprime
+        except FileNotFoundError:
+            flash(u'Image {filename} inexistante.'.format(filename=filename), 'error')
+        return redirect(url_for('mygallery.gallery'))
+              
+
+@mygallery.route('/remove_publicImage/<filename>')
+def remove_publicImage(filename):
+    if 'username' in session :
+        user = '%s' % escape(session['username'])
+        filename = secure_filename(filename)    
+        try:
+            os.remove(DOSSIER_PUBLIC + user + '/images/thumbnails/' + filename) # on le supprime
+            os.remove(DOSSIER_PUBLIC + user + '/images/' + filename) # on le supprime
+        except FileNotFoundError:
+            flash(u'Image {filename} inexistante.'.format(filename=filename), 'error')
+        return redirect(url_for('mygallery.gallery'))