display flex

app.py

@@ -37,31 +37,32 @@ class PrefixMiddleware(object):
 
 
 app = Flask(__name__)
+app.config['SECRET KEY']='this should be a secret random string'
 
 # register the middleware to prefix all the requests with our base_url
-app.wsgi_app = PrefixMiddleware(app.wsgi_app, prefix='/soupboat/library')
+app.wsgi_app=PrefixMiddleware(app.wsgi_app, prefix='/soupboat/library')
 
 
-@app.route("/")
+@ app.route("/")
 def home():
-    conn = get_db_connection()
-    todos = conn.execute('SELECT c.id, c.content, cat.title  \
+    conn=get_db_connection()
+    todos=conn.execute('SELECT c.id, c.content, cat.title  \
                           FROM cards c JOIN categories cat \
                           ON c.category_id = cat.id ORDER BY cat.title').fetchall()
 
-    categories = {}
+    categories={}
 
     # for each category and group of cards for each cat in groupby() grouper object
     for k, g in groupby(todos, key=lambda t: t['title']):
-        cards = []
+        cards=[]
 
         for card in g:
-            card = dict(card)
+            card=dict(card)
             print('card is:', card)
             cards.append(card)
         # print(categories[k])
 
-        categories[k] = list(cards)
+        categories[k]=list(cards)
 
     for cat, cards in categories.items():  # ♥ .items is a build in attribute of the dictionary(?)
         print(cat)
@@ -72,19 +73,19 @@ def home():
     return render_template('home.html', categories=categories)
 
 
-@app.route("/add/", methods=['GET', 'POST'])
+@ app.route("/add/", methods=['GET', 'POST'])
 def create():
-    conn = get_db_connection()
+    conn=get_db_connection()
 
     if request.method == 'POST':
-        content = request.form['content']
-        cat_title = request.form['cat']
+        content=request.form['content']
+        cat_title=request.form['cat']
 
         if not content:
             flash('plz write a content!')
             return redirect(url_for('home'))
 
-        cat_id = conn.execute('SELECT id FROM categories WHERE title = (?);',
+        cat_id=conn.execute('SELECT id FROM categories WHERE title = (?);',
                               (cat_title,)).fetchone()['id']
         conn.execute('INSERT INTO cards (content, category_id) VALUES (?,?)',
                      (content, cat_id))
@@ -92,31 +93,31 @@ def create():
         conn.close()
         return redirect(url_for('home'))
 
-    categories = conn.execute('SELECT title FROM categories;').fetchall()
+    categories=conn.execute('SELECT title FROM categories;').fetchall()
 
     conn.close()
     return render_template('create.html', categories=categories)
 
 
-@app.route('/<int:id>/edit/', methods=('GET', 'POST'))
+@ app.route('/<int:id>/edit/', methods=('GET', 'POST'))
 def edit(id):
-    conn = get_db_connection()
+    conn=get_db_connection()
 
-    todo = conn.execute('SELECT c.id, c.category_id, c.content, cat.title \
+    todo=conn.execute('SELECT c.id, c.category_id, c.content, cat.title \
                          FROM cards c JOIN categories cat \
                          ON c.category_id = cat.id WHERE c.id = ?', (id,)).fetchone()
 
-    categories = conn.execute('SELECT title FROM categories;').fetchall()
+    categories=conn.execute('SELECT title FROM categories;').fetchall()
 
     if request.method == 'POST':
-        content = request.form['content']
-        cat_title = request.form['cat']
+        content=request.form['content']
+        cat_title=request.form['cat']
 
         if not content:
             flash('plz insert any content!')
             return redirect(url_for('home'))
 
-        cat_id = conn.execute('SELECT id FROM categories WHERE title = (?);',
+        cat_id=conn.execute('SELECT id FROM categories WHERE title = (?);',
                               (cat_title,)).fetchone()['id']
 
         conn.execute('UPDATE cards SET content = ?, category_id = ? \
@@ -129,9 +130,9 @@ def edit(id):
     return render_template('edit.html', todo=todo, categories=categories)
 
 
-@app.route('/<int:id>/delete/', methods=('POST',))
+@ app.route('/<int:id>/delete/', methods=('POST',))
 def delete(id):
-    conn = get_db_connection()
+    conn=get_db_connection()
     conn.execute('DELETE FROM cards WHERE id = ?', (id,))
     conn.commit()
     conn.close()

static/style_default.css

@@ -2,7 +2,7 @@ body{
     
 }
 
-.formPanel{
+/* .formPanel{
     display: none;
     background-color: rgb(239, 255, 167);
     width: 300px;
@@ -10,4 +10,12 @@ body{
     position: absolute;
     top: 3em;
     margin: 0 auto;
+} */
+.all-cards{
+    display: flex;
+    flex-flow: row;
+}
+.card{
+    border: 1px solid rgb(147, 93, 255);
+    padding: 4px;
 }

templates/base.html

@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<title>{% block title %} {% endblock %}</title>
-        <!-- <link rel="stylesheet" href="{{url_for('static', filename='style_default.css')}}"> -->
+        <link rel="stylesheet" href="{{url_for('static', filename='style_default.css')}}">
         <!-- <script src="{{url_for('static', filename='addnew_panel.js')}}"></script> -->
 	</head>
 	<body>

templates/home.html

@@ -2,38 +2,39 @@
 
 {% block content %}
     <h1>{% block title %} Welcome to grgr's library {% endblock %}</h1>
-    {% for category, cards in categories.items() %}
-        <div class="card" style="width: 18rem; margin-bottom: 50px;">
-            <div class="card-header">
-                <h3>{{ category }}</h3>
-            </div>
-            <ul class="list-group list-group-flush">
+
+        <div class="all-cards">
+            {% for category, cards in categories.items() %}
+            
 
                 {% for card in cards %}
-                    <li class="list-group-card">{{ card['content'] }}</li>
+                <div class="card">
+                    <div class="card-header">
+                        <h6>{{ category }}</h6>
+                    </div>
                     
-                    <div class="row">
-                        
-                        <div class="col-12 col-md-3">
-                            <a class="btn btn-warning btn-sm"
-                            href="{{ url_for('edit', id=card['id']) }}">Edit</a>
-                        </div>
-
-
-                        <div class="col-12 col-md-3">
-                            <form action="{{ url_for('delete', id=card['id']) }}"
-                                method="POST">
-                                <input type="submit" value="Delete"
-                                    class="btn btn-danger btn-sm">
-                            </form>
+                        <div class="list-group-card">{{ card['content'] }}</div>
+                
+                        <div class="row">
+                
+                            <div class="col-12 col-md-3">
+                                <a class="btn btn-warning btn-sm" href="{{ url_for('edit', id=card['id']) }}">Edit</a>
+                            </div>
+                
+                
+                            <div class="col-12 col-md-3">
+                                <form action="{{ url_for('delete', id=card['id']) }}" method="POST">
+                                    <input type="submit" value="Delete" class="btn btn-danger btn-sm">
+                                </form>
+                            </div>
                         </div>
-                    </div>
-
-                    <hr>
+                </div>
                 {% endfor %}
-            </ul>
+            
+            {% endfor %}
+        
         </div>
-    {% endfor %}
+    
 {% endblock %}
 <!-- {#<!DOCTYPE html>
 <html lang="en">