HTML/CSS for the path field

2 files changed, 119 insertions, 85 deletions

diff --git a/css/style.css b/css/style.css
index 060fdde..aa29cf6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -135,6 +135,7 @@ form > .content {
 	justify-content: center;
 }
 
+.filesystem > h2,
 form > h2 {
 	color: #4d4d4d;
 	margin: 0;
@@ -228,11 +229,17 @@ input[type=submit]:hover {
 .filesystem {
 	background: #fafafa;
 	margin: 1rem;
-	padding: 1rem;
+	padding: 0;
 	box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2);
 	border-radius: 0.5rem;
 	border-radius: 0.5rem;
 	border: 1px solid #b9b9b9;
+
+    display: block;
+}
+
+.files {
+    padding: 1rem;
     display: grid;
 
     grid-gap: 20px;
@@ -265,3 +272,22 @@ input[type=submit]:hover {
 .file:hover > img {
     filter: brightness(150%);
 }
+
+.path {
+    font-size: 1.5rem;
+}
+
+.path > a {
+    color: #333;
+    text-decoration: none;
+}
+
+.path > a:hover {
+    text-decoration: underline;
+}
+
+.filesystem > h2 {
+    display: flex;
+    align-items: baseline;
+    font-weight: normal;
+}
diff --git a/loggedin.php b/loggedin.php
index bafdd51..dd3a94f 100644
--- a/loggedin.php
+++ b/loggedin.php
@@ -1,89 +1,97 @@
 <div>
-
     <div class="filesystem">
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
-        </div>
-        <div class="file"> 
-            <img src="/mimeicons/application-pdf.png">
-            <div class="filename">asdf</div>
+
+        <h2>
+            <div class="path">
+                <a class="pathentry" href="#"> <?php echo $_SESSION['username'] ?>'s files/</a><a class="pathentry" href="#">foo/</a><a class="pathentry" href="#">bar</a></div>
+            <input type="button" value="New Folder">
+        </h2>
+
+        <div class="files">
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
+            <div class="file"> 
+                <img src="/mimeicons/application-pdf.png">
+                <div class="filename">asdf</div>
+            </div>
         </div>
     </div>