DRY html modal and head

getmango · Jun 9, 2020 · a0e5a03 · a0e5a03
1 parent e53641a
commit a0e5a03
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 91 deletions.
diff --git a/src/util.cr b/src/util.cr
@@ -10,6 +10,7 @@ macro layout(name)
     if token = env.session.string? "token"
       is_admin = @context.storage.verify_admin token
     end
+    page = {{name}}
     render "src/views/#{{{name}}}.ecr", "src/views/layout.ecr"
   rescue e
     message = e.to_s

diff --git a/src/views/components/entry-modal.ecr b/src/views/components/entry-modal.ecr
@@ -0,0 +1,34 @@
+<div id="modal" class="uk-flex-top" uk-modal>
+  <div class="uk-modal-dialog uk-margin-auto-vertical">
+    <button class="uk-modal-close-default" type="button" uk-close></button>
+    <div class="uk-modal-header">
+      <div>
+        <% if page == "home" %>
+        <h4 class="uk-margin-remove-bottom"><a id="modal-title-link"></a></h4>
+        <% end %>
+        <h3 class="uk-modal-title break-word uk-margin-remove-top" id="modal-entry-title"><span></span>
+          <% unless page == "home" %>
+          &nbsp;
+          <% if is_admin %>
+          <a class="uk-icon-button" uk-icon="icon:pencil"></a>
+          <% end %>
+          <% end %>
+        </h3>
+      </div>
+      <p class="uk-text-meta uk-margin-remove-bottom break-word" id="path-text"></p>
+      <p class="uk-text-meta uk-margin-remove-top" id="pages-text"></p>
+    </div>
+    <div class="uk-modal-body">
+      <p>Read</p>
+      <p uk-margin>
+        <a id="beginning-btn" class="uk-button uk-button-default">From beginning</a>
+        <a id="continue-btn" class="uk-button uk-button-primary"></a>
+      </p>
+      <p>Progress</p>
+      <p uk-margin>
+        <button id="read-btn" class="uk-button uk-button-default">Mark as read (100%)</button>
+        <button id="unread-btn" class="uk-button uk-button-default">Mark as unread (0%)</button>
+      </p>
+    </div>
+  </div>
+</div>
diff --git a/src/views/components/head.ecr b/src/views/components/head.ecr
@@ -0,0 +1,14 @@
+<head>
+  <meta charset="utf-8">
+  <meta name="X-UA-Compatible" content="IE=edge">
+  <title>Mango</title>
+  <meta name="description" content="Mango - Manga Server and Web Reader">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/css/uikit.min.css" />
+  <link rel="stylesheet" href="<%= base_url %>css/mango.css" />
+  <link rel="icon" href="<%= base_url %>favicon.ico">
+  <script defer src="<%= base_url %>js/fontawesome.min.js"></script>
+  <script defer src="<%= base_url %>js/solid.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+  <script src="<%= base_url %>js/theme.js"></script>
+</head>
diff --git a/src/views/home.ecr b/src/views/home.ecr
@@ -57,32 +57,7 @@
 </div>
 <%- end -%>
 
-<!-- TODO: DRY this code with calls in other ecr files? eg. title.ecr -->
-<div id="modal" class="uk-flex-top" uk-modal>
-  <div class="uk-modal-dialog uk-margin-auto-vertical">
-    <button class="uk-modal-close-default" type="button" uk-close></button>
-    <div class="uk-modal-header">
-      <div>
-        <h4 class="uk-margin-remove-bottom"><a id="modal-title-link"></a></h4>
-        <h3 class="uk-modal-title break-word uk-margin-remove-top" id="modal-entry-title"><span></span></h3>
-      </div>
-      <p class="uk-text-meta uk-margin-remove-bottom break-word" id="path-text"></p>
-      <p class="uk-text-meta uk-margin-remove-top" id="pages-text"></p>
-    </div>
-    <div class="uk-modal-body">
-      <p>Read</p>
-      <p uk-margin>
-        <a id="beginning-btn" class="uk-button uk-button-default">From beginning</a>
-        <a id="continue-btn" class="uk-button uk-button-primary"></a>
-      </p>
-      <p>Progress</p>
-      <p uk-margin>
-        <button id="read-btn" class="uk-button uk-button-default">Mark as read (100%)</button>
-        <button id="unread-btn" class="uk-button uk-button-default">Mark as unread (0%)</button>
-      </p>
-    </div>
-  </div>
-</div>
+<%= render_component "entry-modal" %>
 
 <%- end -%>
 

diff --git a/src/views/layout.ecr b/src/views/layout.ecr
@@ -1,20 +1,7 @@
 <!DOCTYPE html>
 <html>
 
-<head>
-  <meta charset="utf-8">
-  <meta name="X-UA-Compatible" content="IE=edge">
-  <title>Mango</title>
-  <meta name="description" content="Mango - Manga Server and Web Reader">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/css/uikit.min.css" />
-  <link rel="stylesheet" href="<%= base_url %>css/mango.css" />
-  <link rel="icon" href="<%= base_url %>favicon.ico">
-  <script defer src="<%= base_url %>js/fontawesome.min.js"></script>
-  <script defer src="<%= base_url %>js/solid.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-  <script src="<%= base_url %>js/theme.js"></script>
-</head>
+<%= render_component "head" %>
 
 <body>
   <div class="uk-offcanvas-content">

diff --git a/src/views/login.ecr b/src/views/login.ecr
@@ -1,17 +1,7 @@
 <!DOCTYPE html>
 <html>
 
-<head>
-  <meta charset="utf-8">
-  <meta name="X-UA-Compatible" content="IE=edge">
-  <title>Mango</title>
-  <meta name="description" content="Mango Manga Server">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/css/uikit.min.css" />
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-  <script src="<%= base_url %>js/theme.js"></script>
-</head>
+<%= render_component "head" %>
 
 <body>
   <div class="uk-section uk-flex uk-flex-middle uk-animation-fade" uk-height-viewport="">
@@ -43,4 +33,4 @@
   <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit-icons.min.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/src/views/reader.ecr b/src/views/reader.ecr
@@ -1,15 +1,7 @@
 <!DOCTYPE html>
 <html class="reader-bg">
 
-<head>
-  <meta charset="utf-8">
-  <meta name="X-UA-Compatible" content="IE=edge">
-  <title>Mango</title>
-  <meta name="description" content="Mango Manga Server">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/css/uikit.min.css" />
-  <link rel="stylesheet" href="<%= base_url %>css/mango.css" />
-</head>
+<%= render_component "head" %>
 
 <body>
   <script src="<%= base_url %>js/theme.js"></script>
@@ -67,4 +59,4 @@
   <script src="<%= base_url %>js/reader.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/src/views/title.ecr b/src/views/title.ecr
@@ -42,35 +42,7 @@
   <% end %>
 </div>
 
-<div id="modal" class="uk-flex-top" uk-modal>
-  <div class="uk-modal-dialog uk-margin-auto-vertical">
-    <button class="uk-modal-close-default" type="button" uk-close></button>
-    <div class="uk-modal-header">
-      <div>
-        <h3 class="uk-modal-title break-word" id="modal-entry-title"><span></span>
-          &nbsp;
-          <% if is_admin %>
-          <a class="uk-icon-button" uk-icon="icon:pencil"></a>
-          <% end %>
-        </h3>
-      </div>
-      <p class="uk-text-meta uk-margin-remove-bottom break-word" id="path-text"></p>
-      <p class="uk-text-meta uk-margin-remove-top" id="pages-text"></p>
-    </div>
-    <div class="uk-modal-body">
-      <p>Read</p>
-      <p uk-margin>
-        <a id="beginning-btn" class="uk-button uk-button-default">From beginning</a>
-        <a id="continue-btn" class="uk-button uk-button-primary"></a>
-      </p>
-      <p>Progress</p>
-      <p uk-margin>
-        <button id="read-btn" class="uk-button uk-button-default">Mark as read (100%)</button>
-        <button id="unread-btn" class="uk-button uk-button-default">Mark as unread (0%)</button>
-      </p>
-    </div>
-  </div>
-</div>
+<%= render_component "entry-modal" %>
 
 <div id="edit-modal" class="uk-flex-top" uk-modal>
   <div class="uk-modal-dialog uk-margin-auto-vertical">