Set up base styles for content browser

opensafely-core · Sep 4, 2024 · f17318c · f17318c
1 parent 5924158
commit f17318c
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 43 deletions.
diff --git a/airlock/static/assets/file_browser/index.css b/airlock/static/assets/file_browser/index.css
@@ -1,30 +1,3 @@
-/* Page layout */
-.browser {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  min-height: 100%;
-  padding-inline: 1rem;
-}
-
-.browser__files {
-  background-color: white;
-  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
-    rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
-  grid-column: 1 / 1;
-  overflow: scroll;
-}
-
-.browser__content {
-  grid-column: 2 / -1;
-}
-
-.browser__content > div {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
 /* File Card */
 #fileCard h2 {
   font-size: 1.1rem;

diff --git a/airlock/templates/base.html b/airlock/templates/base.html
@@ -29,7 +29,7 @@
 
     {% include '_includes/header.html' %}
 
-    <main class="min-h-[66vh] flex-grow pb-12 bg-slate-100">
+    <main class="max-h-full bg-slate-100 flex flex-col flex-1">
       <div class="container xl:max-w-screen-xl pt-4 pb-4" id="content">
         {% alerts messages=messages %}
         {% block content %}{% endblock %}

diff --git a/airlock/templates/file_browser/_includes/file_content.html b/airlock/templates/file_browser/_includes/file_content.html
@@ -1,12 +1,12 @@
-{% #card id="fileCard" title=path_item.name container=True custom_button=buttons %}
-  <div class="content">
-    <iframe src="{{ path_item.contents_url }}"
-            title="{{ path_item.relpath }}"
-            frameborder=0
-            height=1000
-            style="width: 100%;"
-            sandbox="{{ path_item.iframe_sandbox }} allow-same-origin"
-            id="content-iframe"
-    ></iframe>
-  </div>
+{% #card id="fileCard" title=path_item.name container=False custom_button=buttons %}
+  <iframe
+    class="w-full h-full bg-white border-t border-slate-200 pl-4"
+    style="height: 400px;"
+    frameborder="0"
+    height="100"
+    id="content-iframe"
+    sandbox="{{ path_item.iframe_sandbox }} allow-same-origin"
+    src="{{ path_item.contents_url }}"
+    title="{{ path_item.relpath }}"
+  ></iframe>
 {% /card %}
diff --git a/airlock/templates/file_browser/contents.html b/airlock/templates/file_browser/contents.html
@@ -1,4 +1,4 @@
-<div id="selected-contents" class="min-h-screen">
+<div id="selected-contents" class="h-full">
   {% if path_item.type.name != "REPO" %}
     {% with template_dir|add:path_item.type.name.lower|add:".html" as template %}
       {% include template %}

diff --git a/airlock/templates/file_browser/index.html b/airlock/templates/file_browser/index.html
@@ -14,8 +14,8 @@
 {% block content %}{% endblock content %}
 
 {% block full_width_content %}
-  <div class="browser">
-    <div class="browser__files">
+  <div class="grid grid-cols-4 gap-x-4 flex-1">
+    <div class="border-r border-t bg-white overflow-auto" id="tree-container">
       <ul
         class="tree root tree__root"
         hx-boost="true"
@@ -29,7 +29,7 @@
         {% include "file_browser/tree.html" with path=root.fake_parent %}
       </ul>
     </div>
-    <div class="browser__content">
+    <div class="col-span-3">
       {% include "file_browser/contents.html" %}
     </div>
   </div>