Merge pull request #937 from barchakuz/import-form-test

WCA Standards : Enhancing Import Page Responsiveness and Struture
camicroscope · Apr 1, 2024 · fd45197 · fd45197
2 parents 3d6f9b7 + dcd6278
commit fd45197
Show file tree

Hide file tree

Showing 3 changed files with 182 additions and 96 deletions.
diff --git a/apps/port/import.css b/apps/port/import.css
@@ -0,0 +1,152 @@
+body{
+    font-family: Roboto, Arial, sans-serif;
+}
+#exportTitle, #exportTitle h1 {
+    margin: -8px;
+    padding: 0;
+}
+.form{
+    margin: auto;
+    width: 50%;
+    height: 100%;
+    background-color:#f2f2f2;
+    box-sizing: border-box;
+
+}
+input {
+    font-family: Roboto, Arial, sans-serif;
+    font-size: 16px;
+    width: 60%;
+    margin-left: 20%;
+    height: 35px;
+    border: none;
+    border-bottom: 3px solid grey;
+    transition: background-color 0.3s ease;
+  }
+textarea{
+    margin-left: 5%;
+    font-family: Roboto, Arial, sans-serif;
+    font-size: 16px;
+    width: 90%; 
+    max-width: 100%; 
+    height: 150px;
+    border: 3px solid grey;
+    transition: background-color 0.3s ease;
+    box-sizing: border-box;
+  }
+input:hover{
+    background-color: #F9F7F1;
+}
+input:focus{
+    outline: none;
+    border: none;
+
+    border-bottom: 3px solid #17a2b8;
+}
+textarea:hover{
+    background-color: #F9F7F1;
+}
+textarea:focus{
+    outline: none;
+}
+::placeholder {
+    font-family: Roboto, Arial, sans-serif;
+    font-size: 16px;
+    color: grey;
+    font-size: 11pt;
+
+
+  }
+
+#exportTitle {
+    width: 100%;
+    background-color: #17a2b8 !important;
+    color: white;
+    font-size: 18px;
+}
+
+.buttons {
+    width: 40%;
+    padding: 10px 0;
+    border-radius: 5px;
+    background: #17a2b8;
+    border-color:#17a2b8;
+    font-size: 14px;
+    font-weight: 600;
+    color: #fff;
+    display: inline-block; 
+    box-shadow: none;
+    transition: background-color 0.3s ease;
+}
+  .buttons:hover {
+    border: 1px solid #17a2b8;
+    color: #17a2b8;
+    background: #fff;
+  }
+
+  .h1 {
+    font-weight: bold;
+    height: 120px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .h3 {
+    margin: 20px 0 0 25%;
+    font-size: 18px;
+  }
+
+  .h {
+    text-align: center;
+    padding-top: 2%;
+    font-size: 25pt;
+    color: MediumSeaGreen;
+    /* border-bottom: 4px solid lightgrey; 
+    width: */
+  }
+.h2{
+    text-align: center;
+    padding-top: 2%;
+    font-size: 25pt;
+    color: MediumSeaGreen;
+    /* border-bottom: 4px solid lightgrey;  */
+}
+
+  .form-check-input {
+    padding: 5px !important;
+  }
+
+  .btns {
+    margin-left: 22%;
+    width: 70%;
+
+  }
+  .btnn{
+    margin-left: 260px;
+  }
+  .file {
+    margin-top: 20px;
+  }
+label{
+    font-size:15pt;
+
+}
+@media only screen and (max-width: 600px) {
+    .form {
+        width: 100%;
+        margin-left: 0px;
+    }
+
+    .buttons {
+        width: calc(50% - 5px); 
+        display: block; 
+        margin-right: 5px; 
+        margin-bottom: 10px; 
+    }
+
+    textarea {
+        width: 90%; 
+        margin-left: 5%; 
+    }
+}
diff --git a/apps/port/import.html b/apps/port/import.html
@@ -5,108 +5,41 @@
   <script src="../../core/Store.js"></script>
   <script src="./import.js"></script>
   <script src="./xml2geo.js"></script>
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
-  <link rel="stylesheet" href="../../common/stacktable.css">
-  <link rel="stylesheet" href="./style.css">
-  <link rel="stylesheet" href="../table.css" />
-  <link rel="stylesheet" href="../info.css" />
+  <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> -->
+  <!-- <link rel="stylesheet" href="../../common/stacktable.css"> -->
+  <link rel="stylesheet" href="./import.css">
+  <!-- <link rel="stylesheet" href="../table.css" />
+  <link rel="stylesheet" href="../info.css" /> -->
   <title>Import and Export caMicroscope</title>
-  <style>
-    #exportTitle {
-      background-color: #17a2b8 !important;
-      color: white;
-      font-size: 18px;
-    }
-
-    .buttons {
-      width: 20%;
-      padding: 10px 0;
-      margin: 10px 40px;
-      border-radius: 5px;
-      border: none;
-      background: #17a2b8;
-      font-size: 14px;
-      font-weight: 600;
-      color: #fff;
-    }
-
-    .buttons:hover {
-      border: 1px solid #17a2b8;
-      color: #17a2b8;
-      background: #fff;
-    }
-
-    .h1 {
-      height: 120px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .h3 {
-      margin: 20px 0 0 25%;
-      font-size: 18px;
-    }
-
-    .h {
-      margin: 5px;
-    }
-
-    input {
-      margin: 5px;
-    }
-
-    .form-check-input {
-      padding: 5px !important;
-    }
-
-    .btns {
-      display: flex;
-      margin: 0 20px;
-    }
-    .btnn{
-      margin: 10px 180px;
-    }
-    .file {
-      margin-top: 20px;
-    }
-    .slide {
-      margin:5px;
-    }
-  </style>
 </head>
 
-
 <body>
   <div class="" id="exportTitle">
     <h1 class="h1">Import Annotations</h1>
   </div>
-  <div class="h3">
+  <div class="form">
     <h3 class="h">Info</h3>
-    <div class="form">
-      <div class="slide">
-        <label for="slide_id" class="slide">Slide Id:</label>
-        <br>
-        <input type="text" id="slide_id" name="slide_id"><br>
-      </div>
-      <div class="slide">
-        <label for="annot_name" class="slide">Annotation Name:</label><br>
-        <input type="text" id="annot_name" name="annot_name"><br>
-      </div>
-      <h3 class="h h3 file">File Contents</h3>
-      <div class="slide">
-        <label for="annot_name" class="slide">Input:</label><br>
-        <textarea id="input" name="input" class="slide" rows="5" cols="75"></textarea><br>
-      </div>
-      <div class="btns">
-        <button id="convert_btn btn1" class="buttons" onclick="xml2geo()" type="button">Convert from XML</button>
-        <button id="prepare_btn btn2" class="buttons" onclick="prepareAnnot()" type="button">Prepare JSON</button>
-      </div>
-      <label for="annot_name" class="slide">Output:</label><br>
-      <textarea id="input" name="input" class="slide" rows="5" cols="75"></textarea><br>
-      <button id="post_btn" class="buttons btnn" onclick="saveAnnot()" type="button">Post</button>
+  <br>
+    <div class="slide" >
+      <input type="text"  name="slide_id" placeholder="Slide Id:"><br>
+    </div>
+    <br>
+    <div class="slide">
+      <input type="text" name="annot_name" placeholder="Annotation Name:"><br>
     </div>
+    <h3 class="h2">File Contents</h3>
+    <div class="slide">
+      <textarea name="input" class="slide" rows="5" cols="75" placeholder="Input Here"></textarea><br>
+    </div>
+    <br>
+    <div class="btns">
+      <button id="convert_btn btn1" class="buttons" onclick="xml2geo()" type="button">Convert from XML</button>
+      <button id="prepare_btn btn2" class="buttons" onclick="prepareAnnot()" type="button">Prepare JSON</button>
+    </div>
+    <br>
+      <textarea name="input" class="slide" rows="5" cols="75" placeholder="Output:"></textarea><br>
+      <button id="post_btn" class="buttons btnn" onclick="saveAnnot()" type="button">Post</button>
   </div>
 </body>
 

diff --git a/apps/port/style.css b/apps/port/style.css
@@ -1,7 +1,8 @@
 html, body {
       min-height: 100%;
       }
-      body, div, form, input, select, p {
+
+      body, div, input, select, p {
       padding: 0;
       margin: 0;
       outline: none;
@@ -25,7 +26,6 @@ html, body {
       }
       form {
       width: 100%;
-      padding: 20px;
       }
       fieldset {
       border: none;
@@ -46,6 +46,7 @@ html, body {
       }
       label {
       padding: 0 5px;
+      font-size: 14pt;
       text-align: right;
       vertical-align: middle;
       }
@@ -120,4 +121,4 @@ html, body {
     select, .children, .gender, .bdate-block {
       width: calc(60% + 16px);
     }
-}
+}