update css

raincloud.py

@@ -67,20 +67,18 @@ app = Flask(__name__)
 
 @app.route("/<directory>", methods=["GET", "POST"])
 @app.route("/<directory>/<path:filename>", methods=["GET"])
-def files(directory, filename=None):
+def directory(directory, filename=None):
 
     try:
         config = get_config(directory)
         if config["password"]:
-            authenticated = False
-            if directory in session and session[directory] == config["password"]:
-                authenticated = True
+            authenticated = True if directory in session and session[directory] == config["password"] else False
 
             if not authenticated:
                 if request.method == "POST":
                     if request.form["password"] == config["password"]:
                         session[directory] = config["password"]
-                    return redirect(url_for("files", directory=directory))
+                    return redirect(url_for("directory", directory=directory))
                 else:
                     return render_template(
                         "authenticate.html", cloud_name=cloud_name, config=config
@@ -91,7 +89,7 @@ def files(directory, filename=None):
             if not filename:
                 files = get_files(directory)
                 return render_template(
-                    "files.html", cloud_name=cloud_name, config=config, files=files
+                    "directory.html", cloud_name=cloud_name, config=config, files=files
                 )
 
             # Download
@@ -109,11 +107,8 @@ def files(directory, filename=None):
                 if filename != "rc.toml":
                     f.save(base_path / directory / filename)
 
-                # Return new file list
-                files = get_files(directory)
-                return render_template(
-                    "files.html", cloud_name=cloud_name, config=config, files=files
-                )
+                # Reload
+                return redirect(url_for("directory", directory=directory))
             else:
                 return "No upload allowed"
 

static/style.css

@@ -9,13 +9,60 @@ body {
 }
 
 #header {
-  border: 1px solid green;
+  padding: 15px 30px;
+  border-bottom: 1px solid lightgray;
+  font-size: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-#title {
-  font-size: 14pt;
+#cloud-name {
+
+}
+
+#directory-name {
+  font-weight: bold;
 }
 
 #content {
-  border: 1px solid red;
+  margin: 50px 150px;
+}
+
+.file {
+  border-bottom: 1px solid lightgrey;
+  padding: 5px 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.button {
+  background-color: #28bcff;
+  border: none;
+  border-radius: 5px;
+  color: white;
+  padding: 12px 28px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  margin: 4px 2px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: #0cb3ff;
+}
+
+input[type="file"] {
+  display: none;
+}
+
+.upload {
+  background-color: #4bcd8f;
+}
+
+.upload:hover {
+  background-color: #3bc885;
 }

templates/base.html

@@ -2,10 +2,13 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
-<title>{{ config["directory"] }} - {{ cloud_name }}</title>
+<title>{{ cloud_name }} :: {{ config["directory"] }}</title>
 <div id="container">
   <div id="header">
-    <span id="title">{{ config["directory"] }}</span>
+    <div>
+      <span id="cloud-name">{{ cloud_name }} :: </span><span id="directory-name">{{ config["directory"] }}</span>
+    </div>
+    {% block nav_content %}{% endblock %}
   </div>
   <div id="content">
     {% block content %}{% endblock %}

templates/directory.html

@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+{% block nav_content %}
+  {% if config["upload"] %}
+    <div>
+      <form action="/{{ config["directory"] }}" enctype="multipart/form-data" method="post">
+        <label class="button upload">
+          <input type="file" name="file" onchange="this.form.submit()">
+          Upload
+        </label>
+      </form>
+    </div>
+  {% endif %}
+{% endblock %}
+{% block content %}
+  {% for f in files %}
+    <div class="file">
+      <p>{{ f["name"] }}</p>
+      {% if config["download"] %}
+        <a href="{{ config["directory"] }}/{{ f["name"] }}" class="button">Download</a>
+      {% endif %}
+    </div>
+  {% endfor %}
+{% endblock %}

templates/files.html

@@ -1,19 +0,0 @@
-{% extends "base.html" %}
-{% block content %}
-  {% if config["upload"] %}
-    <form action="/{{ config["directory"] }}" enctype="multipart/form-data" method="post">
-      <input type="file" name="file">
-      <input type="submit">
-    </form>
-  {% endif %}
-  <ul>
-    {% for f in files %}
-      <li>
-        <span>{{ f["name"] }} </span>
-        {% if config["download"] %}
-          <a href="{{ config["directory"] }}/{{ f["name"] }}">Download</a>
-        {% endif %}
-      </li>
-    {% endfor %}
-  </ul>
-{% endblock %}