Edit functionality

[pixel-calc.git] / public_html / index.php
diff --git a/public_html/index.php b/public_html/index.php

index 5d46478..4e90b7b 100644 (file)
--- a/public_html/index.php
+++ b/public_html/index.php
@@ -37,6 +37,12 @@
                align-items: center;
              }
              
+            #edit .thumbnail {
+                max-height: 30vh;
+                max-width: 30vh;
+                padding: 0px;
+            }
+            
              #edit img {
                  height: 30vh;
                  width: 30vh;
@@ -69,30 +75,43 @@
                  width: 100%;
                  image-rendering: pixelated;
              }            
-            
-            #menu-container div{
+
+            .menu-container>div {
                  height: 72px;
+            }
+            
+            .text-scroll{
                  left: 0;
                  text-align: center;
                  overflow: hidden;
                  margin: 5px;
              }
  
-            #menu-container div span{
+            .text-scroll span{
                  display: block;
                  -webkit-transition: all 0.5s ease-in-out;
                  -moz-transition: all 0.5s ease-in-out;
                  -o-transition: all 0.5s ease-in-out;
                  transition: all 0.5s ease-in-out;
                  font-size: 72px;
-                margin-top: 3px;
              }
  
-            #menu-container div:hover span{
+            .text-scroll:hover span{
                  margin: -85px 0 0 0;
                  cursor: default;
              }
              
+            #edit .text-scroll:hover span {
+                margin-top: -75px;
+            }
+            
+            #edit h2 {
+                background: #2ecc71;
+                color: white;
+                padding-bottom: 10px;
+                padding-top: 10px;
+            }
+            
              #upload {
                  background: #2ecc71;
              }
@@ -137,25 +156,30 @@
              #materials-presets a.active {
                  background-color: blue;
              }
+            
+            .text-scroll a, #text-scroll a:hover {
+                text-decoration: none;
+                color: #333;
+            }
          </style>
      </head>
      <body>
          
          <div id="menu" class="container-fluid vertical-center">
              <div class="col-md-2 col-md-push-4 col-xs-4 col-xs-push-2">
-                <div id="menu-container">
-                   <div>
+                <div class="menu-container">
+                   <div class="text-scroll">
                         <span>
-                           <i class="fa fa-upload"></i><h2>UPLOAD</h2>
+                           <a href="#upload"><i class="fa fa-upload"></i><h2>UPLOAD</h2></a>
                         </span>
                      </div>
                  </div>
              </div>
              <div class="col-md-2 col-md-push-4 col-xs-4 col-xs-push-2">
-                <div id="menu-container">
-                   <div>
+                <div class="menu-container">
+                   <div class="text-scroll">
                         <span>
-                           <i class="fa fa-edit"></i><h2>EDIT</h2>
+                           <a href="#edit"><i class="fa fa-edit"></i><h2>EDIT</h2></a>
                         </span>
                      </div>
                  </div>
@@ -219,9 +243,14 @@
                      <?php $vars =  unserialize(file_get_contents($file)); ?>
                      <?php $hash =  basename($file, ".txt"); ?>
                      <div class="col-lg-4 col-sm-6 col-xs-12">
-                       <a href="upload.php?sprite=<?php echo $hash; ?>">
-                            <img src="uploads/<?php echo $hash; ?>.png" class="thumbnail img-responsive">
-                       </a>
+                        <div class="text-scroll thumbnail">
+                            <span>
+                                <a href="upload.php?sprite=<?php echo $hash; ?>">
+                                     <img src="uploads/<?php echo $hash; ?>.png" class="img-responsive">
+                                </a>
+                                <h2><?php echo $vars['spritename']; ?></h2>
+                            </span>
+                        </div>
                     </div>
                  <?php endforeach; ?>
              </div>