updating main!

.github/pull_request_template.md

@@ -6,14 +6,15 @@ As a reminder here is a checklist
 ### Checklist
 
 - [ ] I indicated which issue (if any) is closed with this PR using [closing keywords](https://help.github.com/articles/closing-issues-using-keywords)
-- [ ] I only changed lines related to my PR (no bulk reformating)
+- [ ] I only changed lines related to my PR (no bulk reformatting)
 - [ ] I indicated the source and check the license if I re-use code, or I did not re-use code
 - [ ] I made my best to solve only one issue in this PR, or explain why multi had to be solved at once.
 
 ### Issue
 
 close/fix/resolve #???
-<!-- pick on of close/fix/resolve, remove the other and then replace ??? with the issue number -->
+<!-- pick one of close/fix/resolve, remove the other and then replace ??? with the issue number -->
 
 ### Details
 <!-- Put any relevant information below, or remove Details section -->
+<!-- If you PR is about new visual effect, screenshot or screen recording are warmly welcome, I personally recommend https://github.com/phw/peek to record as gif. -->

.gitignore

@@ -106,3 +106,10 @@ ENV/
 
 .idea
 node_modules/
+.vscode/
+
+# don't follow it for now considering the low number of dependencies, and the
+# fact that it can change when you run npm install, and thus new commiters could
+# colide commit by commiting new version of it
+package-lock.json
+# end of file

CONTRIBUTING.md

@@ -6,7 +6,7 @@ The recommended way for contributors to submit code to EDAM Browser is to fork t
 
 Please make one PR per issue, solving multiple issues in the same PR make it harder to assess independently each solution and delay the moment changes can be merge.
 
-Do not reformat code that you would not changing otherwise with you commit.
+No bulk reformatting, only reformat code that is already changed by the code you wrote when solving the issue you are addressing.
 
 The contributed code will be [**licensed under EDAM Browser's license**](https://github.com/edamontology/edam-browser/blob/main/LICENSE).
 If you did not write the code yourself, please ensure that the license is compatible, or obtain a permission from the original author to relicense the contributed code.

README.md

@@ -13,31 +13,25 @@ The EDAM Browser is a client-side web-based visualization javascript widget. Its
 
 Go to https://edamontology.github.io/edam-browser/
 
+---
 ### ... locally
 
 1. Download/clone the repository
 
 2. Change to working directory : `cd edam-browser`
 
-3. Run it
+##### Option 1: *You need node.js and npm*
+ - `npm install`
+ - `npm run dev`
 
-##### Option 1:
-> Run `yarn start`
-> It starts a web server allowing you to browse EDAM on [localhost:20080](http://0.0.0.0:20080).
-
-##### Option 2:
-> Run `python3 -m http.server 20080`
-> It starts a web server allowing you to browse EDAM on [localhost:20080](http://0.0.0.0:20080).
+##### Option 2: *You need Python3*
+Run `python3 -m http.server 20080` . It starts a web server allowing you to browse EDAM on localhost:20080.
 
 ##### Option 3:
-> Run `start_edam_stand_alone_browser.sh`
-> It starts a web server allowing you to browse EDAM on [localhost:20080](http://0.0.0.0:20080).
-
-##### Optionally on Windows:
 - Open Visual Studio Code extensions explorer, and search for [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
 - Install the "Liver Server" extension
 - With the index.html file open in the editor, right-click and select "Open with Live Server" to launch EDAM browser on [http://127.0.0.1:5500](http://127.0.0.1:5500) in your default web browser
-
+---
 
 ### ... with a custom ontology
 

css/dark-theme.css

@@ -1,4 +1,8 @@
 /*dark theme styling for propose change page starts here*/
+.dark-mode .page-header {
+  border-bottom-color: #252525;
+}
+
 .dark-mode textarea {
   background-color: #202020;
   color: #B8B8B8;
@@ -70,11 +74,26 @@
   color: #B8B8B8;
   border-color: #050505;
 }
+div.btn-toggle-wrapper {
+  position: absolute;
+  top: 12px;
+  right: 15px;
+  width: fit-content !important;
+
+}
+.btn-toggle {
+  width: 60px;
+  height: 24px;
+  outline: none;
+  border-radius: 30px;
+  border: 1px solid #bdbdbd;
+}
+.dark-mode .toggle-icon {
+  fill: #eeeeee;
+}
 
-.dark-mode .page-header {
-  background-color: #080808;
-  color: #B8B8B8;
-  border-bottom: none !important;
+.dark-mode #page-header {
+  border-bottom-color: #252525;
 }
 
 .dark-mode .panel-heading {
@@ -214,4 +233,8 @@
 .dark-mode .popover tr {
   border-width: 1px;
 }
+
+.dark-mode .input-group-addon {
+  background-color: #A9A9A9;
+}
 /*styling for dark theme for main page ends here*/

css/index.css

@@ -3,30 +3,58 @@
     margin-bottom: 15px;
     padding-top: 10px;
 }
-.page-header{
+#page-header{
+    margin-top:15px;
+    margin-bottom:9px;
+    flex-wrap: wrap!important;
+    border-bottom: 1px solid #eee;
+}
+#page-header>*{
+    flex:1 0 auto;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    margin-bottom:9px;
+}
+#page-header>*:first-child{
+    flex:0 1 auto;
+}
+#page-header>*:last-child{
+    min-width:30em;
+}
+#header-desc img {
+    margin-right: 1em;
+    height: 108px;  
+}
+#pageTitle{
     margin-top:0;
 }
-.meta-info>*{
-    font-size:0;
-    color:white;
-    -webkit-transition: color 0.3s, font-size 0.3s;
-       -moz-transition: color 0.3s, font-size 0.3s;
-         -o-transition: color 0.3s, font-size 0.3s;
-            transition: color 0.3s, font-size 0.3s;
+.header-icon>* {
+    margin-right:1em;
 }
-.meta-info .not-hidden, .meta-info .not-hidden>*{
-    font-size:inherit;
-    color:inherit;
-
+.d-flex {
+    display: flex;
 }
-.meta-info:hover {
-    background-color: #f5f5f5;
-    border: #ddd solid 1px;
-    border-radius: 3px;
+.flex-column{
+    flex-direction: column;
 }
-.meta-info:hover>*{
-    font-size:inherit;
-    color:inherit;
+.loader-wrapper{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  display:flex;
+  justify-content: center;
+  align-items: center;
+}
+.tree-controls .meta-info span{
+    padding-left:0;
+}
+.tree-controls .meta-info{
+    padding: 6px 12px;
+    border-radius: 4px;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
 }
 .modal-dialog .modal-body+.modal-body {
     border-top: 1px solid #e5e5e5;
@@ -51,8 +79,11 @@ input:disabled+.text-for-disabled-input{
     margin-bottom:0px;
     line-height:2;
 }
+#edamAccordion tbody.details th *[data-toggle="tooltip"]{
+    cursor:default;
+}
 #tree {
-    height:70vh;
+    height:100%;
 }
 
 #edamAccordion table .details td a{
@@ -91,34 +122,57 @@ a:before {
 #tree-and-controls
 {
     position:relative;
+    height: 70vh !important;
 }
 
-#tree-controls{
+.tree-controls{
     position: absolute ;
-    right:0px;
-    top:1em;
     display:flex;
     flex-direction:column;
 }
-#tree-controls>*{
+.tree-controls-right-bottom{
+    right:0px;
+    bottom:1em;
+}
+.tree-controls-right-top{
+    right:0px;
+    top:1em;
+}
+.tree-controls>*{
     text-align: end;
     margin-bottom: 1em;
 }
-#tree-controls>*>*{
+.tree-controls .tree-control-element,
+.tree-controls button.btn{
     border-width: 0;
     color: white;
     background: #000000c3;
     min-width:3em;
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
 }
-#tree-controls .on-controls-hover{
+.tree-controls .tree-controls-group>*:not(:first-child) button.no-on-controls-hover,
+.tree-controls .tree-controls-group>*:not(:first-child) button:not(:hover){
+    border-top-left-radius: 0;
+}
+.tree-controls .tree-controls-group>*:not(:last-child)  button.no-on-controls-hover,
+.tree-controls .tree-controls-group>*:not(:last-child)  button:not(:hover){
+    border-bottom-left-radius: 0;
+}
+.tree-controls .on-controls-hover{
     display:none;
     padding-left: 1rem;
 }
-#tree-controls *:hover>.on-controls-hover{
+.tree-controls *:hover>.on-controls-hover{
     display:initial;
 }
+.tree-controls .tree-control-element a {
+    color: #98bfe2;
+}
+.tree-controls .tree-control-element a:focus,
+.tree-controls .tree-control-element a:hover {
+    color: #5c9ad1;
+}
 body {
   overflow-x: hidden;
 }
@@ -128,3 +182,12 @@ body {
 .temp:last-child {
     opacity: 0;
 }
+@media (max-width: 768px){
+    #page-header>*:last-child{
+        min-width:90vw;
+    }
+    #logo{
+        display:none;
+    }
+}
+/*end of file*/

edit.html

@@ -2,6 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
     <title>EDAM ontology browser</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/png" href="favicon.ico"/>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css">
     <script