Set of fixes for mainpage layout

erdnaxe commented 3 years ago

These commits fix the overflow on the main page, remove the CSS height calc() and remove font awesome.

Do we also want to center the groupform and public-groups table in the middle of the page? Example of render:

Render example on medium size device

takdj commented 3 years ago

The changes are good for me to be merged.

takdj commented 3 years ago

Do we also want to center the groupform and public-groups table in the middle of the page? Example of render:

The box height will change with the number of public groups, not sure that render will be the same with 10 public groups.

erdnaxe commented 3 years ago

This is the render with a lot of public groups:

Here is the patch to get this result:

diff --git a/static/index.html b/static/index.html
index 9b533f1f3553899eda1ca576abc3352e1a822010..7c00930fed8aa1e6cf92acdedb91d1ba38a409db 100644
--- a/static/index.html
+++ b/static/index.html
@@ -12,10 +12,11 @@
   </head>

   <body>
-  
-    <div class="home">
-      <h1 id="title" class="navbar-brand">Galène</h1>
+    <header>
+      <h1>Galène</h1>
+    </header>

+    <div class="home">
       <form id="groupform">
         <label for="group">Group:</label>
         <input id="group" type="text" name="group" class="form-control form-control-inline"/>
diff --git a/static/mainpage.css b/static/mainpage.css
index 4c38e1c00cb8a66c40c54b837284bf9a4ba5714c..980271fd1658b5c8d77679e58483e56f5bb9fb3a 100644
--- a/static/mainpage.css
+++ b/static/mainpage.css
@@ -7,6 +7,11 @@ body {
 .groups {
 }

+header {
+    margin-bottom: auto;
+    text-align: center;
+}
+
 .nogroups {
     display: none;
 }
@@ -16,8 +21,19 @@ body {
 }

 .home {
+    margin-left: auto;
+    margin-right: auto;
   margin-bottom: auto;
   padding: 1.875rem;
+    border: 1px solid #333;
+    border-radius: .3rem;
+    background-color: #fff;
+    max-width: 30rem;
+    padding: 1rem;
+}
+
+.home h2 {
+    margin-bottom: 0.5rem;
 }

 #public-groups-table tr a{

I can also try to tweak the layout if you are not happy with this result but still want to center the content, else you might merge this merge request without this layout modification.

jech commented 3 years ago

Applied the three patches in 5ce3dce. Please reopen if you think that the code that you pasted inline should be applied (and @takdj agrees).

jech / galene

Set of fixes for mainpage layout #71