Home Explore Help
Sign In
ghorsington
/
bepinbuilds
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Add style for artifacts

ghorsington 4 years ago
parent
3c7ff9fe77
commit
9673d2ff7c
7 changed files with 596 additions and 477 deletions
Split View Show Diff Stats
  1. 1 1
      src/app.py
  2. 467 442
      src/static/all.css
  3. 2 0
      src/static/script/jquery-3.4.1.min.js
  4. 72 25
      src/static/style/main.scss
  5. 4 3
      src/templates/base.html
  6. 1 1
      src/templates/main.html
  7. 49 5
      src/templates/project_view.html

+ 1 - 1
src/app.py
View File 

@@ -76,7 +76,7 @@ def display_project(project_id):
 
 
 
 @app.route("/")
 
-def test():
 
+def index():
 
     projects = get_projects()
 
     return render_template("main.html", projects=projects)

File diff suppressed because it is too large
+ 467 - 442
src/static/all.css


File diff suppressed because it is too large
+ 2 - 0
src/static/script/jquery-3.4.1.min.js


+ 72 - 25
src/static/style/main.scss
View File 

@@ -1,48 +1,95 @@
 
-$menu-item-color:hsl(0, 0%, 100%);
 
-$menu-item-hover-color:hsl(0, 0%, 0%);
 
-$menu-item-hover-background-color:hsl(0, 0%, 96%);
 
-$menu-label-color:hsl(0, 0%, 96%);
 
+$menu-item-color: hsl(0, 0%, 100%);
 
+$menu-item-hover-color: hsl(0, 0%, 0%);
 
+$menu-item-hover-background-color: hsl(0, 0%, 96%);
 
+$menu-label-color: hsl(0, 0%, 96%);
 
 
 @import "bulma/bulma.sass";
 
 
 @media (max-width: $desktop) {
 
-    .hide-sm {
 
-        display: none;
 
-    }    
+  .hide-sm {
 
+    display: none;
 
+  }
 
 
-    div#main-view {
 
-        min-height: initial;
 
-    }
 
+  div#main-view {
 
+    min-height: initial;
 
+  }
 
 }
 
 
 @media (max-width: $tablet) {
 
-    div#ci-menu {
 
-        padding-right: 1.5rem;
 
-    }
 
+  div#ci-menu {
 
+    padding-right: 1.5rem;
 
+  }
 
+}
 
+
 
+div#main-contents {
 
+  padding-left: 2rem;
 
+  padding-right: 2rem;
 
 }
 
 
 div#main-view {
 
-    margin-top: 0;
 
-    min-height: calc(100vh - #{$navbar-height});
 
+  margin-top: 0;
 
+  min-height: calc(100vh - #{$navbar-height});
 
 }
 
 
 div#ci-menu {
 
-    background-color: hsl(0, 0%, 15%);
 
-    box-shadow: -3px 0 10px 2px black;
 
-    padding-left: 1.5rem;
 
+  background-color: hsl(0, 0%, 15%);
 
+  box-shadow: -3px 0 10px 2px black;
 
+  padding-left: 1.5rem;
 
 }
 
 
 nav {
 
-    box-shadow: 0 -3px 10px 3px black;
 
+  box-shadow: 0 -3px 10px 3px black;
 
 }
 
 
-.readme {
 
-    & h1 {
 
-        @extend .is-size-2;
 
+div.artifact-item {
 
+  $artifact-item-radius: 2px;
 
+  margin-bottom: 1.25rem;
 
+
 
+  & > div.artifact-details {
 
+    @extend .columns, .is-mobile;
 
+
 
+    align-items: center;
 
+    margin-top: 0;
 
+    // margin-bottom: 0 !important;
 
+    cursor: pointer;
 
+
 
+    & > div.artifact-id {
 
+      @extend .column, .is-narrow, .has-text-white-ter;
 
+      background-color: hsl(204, 86%, 53%);
 
+      border-top-left-radius: $artifact-item-radius;
 
+      border-bottom-left-radius: $artifact-item-radius;
 
     }
 
 
-    & p {
 
-        margin-top: 1rem;
 
-        margin-bottom: 1rem;
 
+    & > div.artifact-info {
 
+      @extend .column;
 
+      background-color: hsl(0, 0%, 90%);
 
+
 
+      & > div.artifact-info-content {
 
+        @extend .columns, .is-mobile;
 
+        & > p {
 
+          @extend .column, .is-size-5;
 
+        }
 
+        & > div.dropdown-button {
 
+          @extend .column, .is-narrow;
 
+        }
 
+      }
 
     }
 
+
 
+    &:hover {
 
+      & > div.artifact-info {
 
+        background-color: hsl(0, 0%, 92%);
 
+      }
 
+
 
+      & > div.artifact-id {
 
+        background-color: hsl(204, 86%, 58%);
 
+      }
 
+    }
 
+  }
 
+
 
+  & > div.artifact-contents {
 
+    @extend .columns;
 
+    background-color: hsl(0, 0%, 90%);
 
+    border-bottom-left-radius: $artifact-item-radius;
 
+    border-bottom-right-radius: $artifact-item-radius;
 
+  }
 
 }

+ 4 - 3
src/templates/base.html
View File 

@@ -8,13 +8,15 @@
 
     {% assets "scss_all" %}
 
     <link rel="stylesheet" href="{{ ASSET_URL }}">
 
     {% endassets %}
 
+    <script src="{{ url_for('static', filename='script/jquery-3.4.1.min.js') }}"></script>
 
+    <script src="https://kit.fontawesome.com/9ba4c07aa0.js" crossorigin="anonymous"></script>
 
     <title>BepisBuilds - {% block title %}{% endblock %}</title>
 
 </head>
 
 
 <body class="has-background-light">
 
     <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
 
         <div class="navbar-brand">
 
-            <a class="navbar-item" href="https://bulma.io">
 
+            <a class="navbar-item" href="{{ url_for('index') }}">
 
                 <img src="{{ url_for('static', filename='img/logo.png') }}" width="112">
 
             </a>
 
         </div>
 
@@ -31,12 +33,11 @@
 
             {% include "nav.html" %}
 
         </div>
 
         <div class="column">
 
-            <div class="container">
 
+            <div id="main-contents" class="container">
 
                 {%block content%}{%endblock%}
 
             </div>
 
         </div>
 
     </div>
 
-
 
 </body>
 
 
 </html>

+ 1 - 1
src/templates/main.html
View File 

@@ -4,7 +4,7 @@
 
 
 {%block content%}
 
 
-<div class="readme">
 
+<div class="content is-medium">
 
     <h1>BepisBuilds</h1>
 
     <p>
 
         Welcome to BepisBuilds! <br/>

+ 49 - 5
src/templates/project_view.html
View File 

@@ -4,16 +4,60 @@
 
 
 {%block content%}
 
 
-<div class="readme">
 
-    {%- if readme %}
 
+<div class="content">
 
+    <div class="readme">
 
+        {%- if readme %}
 
         {{readme|safe}}
 
-    {%-else%}
 
+        {%-else%}
 
         <h1>{{selected_project.info.name}}</h1>
 
         <p>
 
             Here you can find artifacts for project &quot;{{selected_project.info.name}}&quot;
 
         </p>
 
-    {%-endif%}
 
+        {%-endif%}
 
+    </div>
 
 </div>
 
 
 
-{%endblock%}
 
+<div>
 
+    <h1 class="is-size-3">Artifacts</h1>
 
+
 
+    <div class="artifact-item">
 
+        <div class="artifact-details">
 
+            <div class="artifact-id">
 
+                <p class="is-size-5">#120</p>
 
+            </div>
 
+            <div class="artifact-info">
 
+                <div class="artifact-info-content" style="align-items: center">
 
+                    <p>Build date:</p>
 
+                    <div class="dropdown-button">
 
+                        <i class="fas fa-chevron-down fa-lg"></i>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div class="artifact-contents">
 
+            <div class="column content is-small">
 
+                <h2>Downloads</h2>
 
+
 
+                <div>
 
+                    <table class="table is-hoverable is-striped is-bordered is-narrow">
 
+                        <thead>
 
+                            <tr>
 
+                                <th>Artifact</th>
 
+                                <th>Description</th>
 
+                            </tr>
 
+                        </thead>
 
+                        <tbody>
 
+                            <tr>
 
+                                <td><a class="button is-link">asdasd</a></td>
 
+                                <td>adasdsd</td>
 
+                            </tr>
 
+                        </tbody>
 
+                    </table>
 
+                </div>
 
+                <h2>Changelog</h2>
 
+            </div>
 
+        </div>
 
+    </div>
 
+
 
+    {%endblock%}