Skip to content

P
purescript-gargantext
Commit da677223 authored by arturo's avatar arturo
Browse files
Options

[sidebar] sidebar visibility issues

parent 43f38465
Pipeline #1576 failed with stage
    Hide whitespace changes
    Inline Side-by-side
    Showing with 240 additions and 57 deletions
    dist/index.html
    View file @ da677223
    ...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
    <style> * {margin: 0; padding: 0; list-style: none;} </style> <style> * {margin: 0; padding: 0; list-style: none;} </style>
    </head> </head>
    <body> <body>
    <div id="app" class ="container-fluid"></div> <div id="app"></div>
    <div id="portal"></div> <div id="portal"></div>
    <script src="bundle.js"></script> <script src="bundle.js"></script>
    <script src='https://visio.gargantext.org/external_api.js'></script> <!-- FIXME to be removed --> <script src='https://visio.gargantext.org/external_api.js'></script> <!-- FIXME to be removed -->
    ......
    dist/styles/sass.css
    View file @ da677223
    ...@@ -4,6 +4,14 @@ ...@@ -4,6 +4,14 @@
    /* padding-top: 15px */ /* padding-top: 15px */
    /* padding-bottom: 15px */ /* padding-bottom: 15px */
    /* float: none */ /* float: none */
    #dafixedtop {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 910;
    }
    #corporatop.nav-tabs > li { #corporatop.nav-tabs > li {
    padding-left: 1; padding-left: 1;
    padding-right: 1; padding-right: 1;
    ...@@ -170,10 +178,6 @@ ...@@ -170,10 +178,6 @@
    top: 50px; top: 50px;
    } }
    #dafixedtop {
    z-index: 910;
    }
    #logo-designed { #logo-designed {
    border: 15px; border: 15px;
    } }
    ...@@ -183,7 +187,10 @@ ...@@ -183,7 +187,10 @@
    } }
    #page-wrapper { #page-wrapper {
    margin-top: 96px; padding-top: 40px;
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
    } }
    #user-page-header { #user-page-header {
    ...@@ -518,6 +525,9 @@ li .leaf:hover a.settings { ...@@ -518,6 +525,9 @@ li .leaf:hover a.settings {
    opacity: var(--over50, 0); opacity: var(--over50, 0);
    } }
    #node-popup-tooltip {
    position: fixed;
    }
    #node-popup-tooltip .tree .node { #node-popup-tooltip .tree .node {
    margin-top: 5px; margin-top: 5px;
    } }
    ...@@ -525,6 +535,18 @@ li .leaf:hover a.settings { ...@@ -525,6 +535,18 @@ li .leaf:hover a.settings {
    padding-left: 15px; padding-left: 15px;
    } }
    .right-handed #node-popup-tooltip {
    top: 50%;
    left: 16.6666666667%;
    transform: translateY(-50%);
    }
    .left-handed #node-popup-tooltip {
    top: 50%;
    right: 16.6666666667%;
    transform: translateY(-50%);
    }
    .panel-actions .almost-useable { .panel-actions .almost-useable {
    color: orange; color: orange;
    } }
    ...@@ -540,20 +562,66 @@ li .leaf:hover a.settings { ...@@ -540,20 +562,66 @@ li .leaf:hover a.settings {
    overflow-y: scroll; overflow-y: scroll;
    } }
    .forest-layout-wrapper {
    padding-left: 0;
    padding-right: 0;
    }
    .forest-layout { .forest-layout {
    background-color: #fff; padding-top: 8px;
    position: fixed;
    top: 3.7em;
    width: 15%;
    z-index: 909; z-index: 909;
    position: fixed;
    height: calc(100vh - 56px);
    width: 100%;
    max-width: inherit;
    scrollbar-width: none;
    overflow-y: scroll;
    overflow-x: visible;
    transition: border 150ms;
    }
    .forest-layout::-webkit-scrollbar {
    display: none;
    }
    .right-handed .forest-layout {
    border-right: 1px solid #FFFFFF;
    }
    .right-handed .forest-layout:hover {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    } }
    .left-handed .forest-layout { .left-handed .forest-layout {
    left: 80%; border-left: 1px solid #FFFFFF;
    }
    .left-handed .forest-layout:hover {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    }
    .forest-layout-teaser {
    pointer-events: none;
    position: fixed;
    bottom: 0;
    height: 24px;
    width: calc(16.6666666667% - 1px);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
    }
    .right-handed .forest-layout-teaser {
    left: 0;
    }
    .left-handed .forest-layout-teaser {
    right: 0;
    }
    .left-handed .forest-layout {
    padding-left: 8px;
    padding-right: 16px;
    } }
    .right-handed .forest-layout { .right-handed .forest-layout {
    left: 2%; padding-left: 16px;
    padding-right: 8px;
    } }
    .code-editor .editor .code-area { .code-editor .editor .code-area {
    ...@@ -777,6 +845,20 @@ ul li { ...@@ -777,6 +845,20 @@ ul li {
    padding-top: 100px; padding-top: 100px;
    } }
    #app {
    width: 100%;
    }
    .router-inner {
    display: flex;
    }
    .router-inner.left-handed {
    flex-direction: row;
    }
    .router-inner.right-handed {
    flex-direction: row;
    }
    .range { .range {
    width: 400px; width: 400px;
    /* some space for the right knob */ /* some space for the right knob */
    ......
    dist/styles/sass.css.map
    View file @ da677223
    {"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACtFJ;EAEE;;;AAQF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACzKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGN;EACE;;;AAIA;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AAEJ;EAEE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEA;EACE;;;AAEF;EACE;;;ACnKA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtFZ;EACE;;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;ACtGF;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACRxB;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA","file":"sass.css"} {"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;EAEA;;;AAEF;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;ACrDF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACjFJ;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGN;EACE;;;AAIA;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAEN;EAWE;;AAGE;EACE;;AAEA;EACE;;;AAUR;EAEE;EACA,MAFW;EAGX;;;AAEF;EAEE;EACA,OAFW;EAGX;;;AAGA;EACE;;AACF;EACE;;AACF;EACE;;;AAEJ;EAEE;EACA;;;AACF;EAEE;EACA;;;AAEF;EAGE;EACA;EAKA;EACA;EACA;EACA;EAGA;EACA;EACA;EAKA;;AAHA;EACE;;;AAKJ;EACE;;AAEA;EACE;;;AAEJ;EACE;;AAEA;EACE;;;AAIJ;EAKE;EACA;EACA;EACA,QAPS;EAQT;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACI;EACA;;;AACJ;EACI;EACA;;;AC1PA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtFZ;EACE;;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE;;AAEA;EACE;;AAEF;EACE;;;ACnHJ;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACRxB;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA","file":"sass.css"}
    \ No newline at end of file \ No newline at end of file
    index.html
    View file @ da677223
    ...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
    <style> * {margin: 0; padding: 0; list-style: none;} </style> <style> * {margin: 0; padding: 0; list-style: none;} </style>
    </head> </head>
    <body> <body>
    <div id="app" class ="container-fluid"></div> <div id="app"></div>
    <div id="portal"></div> <div id="portal"></div>
    <script src="bundle.js"></script> <script src="bundle.js"></script>
    </body> </body>
    ......
    src/Gargantext/Components/Forest.purs
    View file @ da677223
    ...@@ -26,7 +26,7 @@ here :: R2.Here ...@@ -26,7 +26,7 @@ here :: R2.Here
    here = R2.here "Gargantext.Components.Forest" here = R2.here "Gargantext.Components.Forest"
    -- Shared by components here with Tree -- Shared by components here with Tree
    type Common = type Common =
    ( frontends :: Frontends ( frontends :: Frontends
    , handed :: T.Box Handed , handed :: T.Box Handed
    , reloadMainPage :: T2.ReloadS , reloadMainPage :: T2.ReloadS
    ...@@ -42,7 +42,7 @@ type Props = ...@@ -42,7 +42,7 @@ type Props =
    , showLogin :: T.Box Boolean , showLogin :: T.Box Boolean
    , showTree :: T.Box Boolean , showTree :: T.Box Boolean
    , tasks :: T.Box GAT.Storage , tasks :: T.Box GAT.Storage
    | Common | Common
    ) )
    type TreeExtra = ( type TreeExtra = (
    ...@@ -108,7 +108,7 @@ plusCpt = here.component "plus" cpt where ...@@ -108,7 +108,7 @@ plusCpt = here.component "plus" cpt where
    cpt { backend, handed, showLogin } _ = do cpt { backend, handed, showLogin } _ = do
    handed' <- T.useLive T.unequal handed handed' <- T.useLive T.unequal handed
    pure $ H.div { className: "row" } pure $ H.div {}
    [ H.button { className: buttonClass handed' [ H.button { className: buttonClass handed'
    , on: { click } , on: { click }
    , title } , title }
    ...@@ -128,12 +128,20 @@ plusCpt = here.component "plus" cpt where ...@@ -128,12 +128,20 @@ plusCpt = here.component "plus" cpt where
    title = "Add or remove connections to the server(s)." title = "Add or remove connections to the server(s)."
    divClass = "fa fa-universal-access" divClass = "fa fa-universal-access"
    buttonClass handed' = buttonClass handed' =
    "btn btn-primary col-5 " <> switchHanded "mr-1 ml-auto" "ml-1 mr-auto" handed' "btn btn-primary d-block " <> switchHanded "mr-1 ml-auto" "ml-1 mr-auto" handed'
    forestLayout :: R2.Component Props forestLayout :: R2.Component Props
    forestLayout = R.createElement forestLayoutCpt forestLayout = R.createElement forestLayoutCpt
    forestLayoutCpt :: R.Component Props forestLayoutCpt :: R.Component Props
    forestLayoutCpt = here.component "forestLayout" cpt where forestLayoutCpt = here.component "forestLayout" cpt where
    cpt p _ = do cpt p _ = pure $
    pure $ H.div { className: "forest-layout" }
    [ forest p [] ] H.div { className: "forest-layout-wrapper col-md-2" }
    [
    H.div { className: "forest-layout" }
    [
    forest p []
    ,
    H.div { className: "forest-layout-teaser" } []
    ]
    ]
    src/Gargantext/Components/MainPage.purs
    View file @ da677223
    ...@@ -2,15 +2,11 @@ module Gargantext.Components.MainPage where ...@@ -2,15 +2,11 @@ module Gargantext.Components.MainPage where
    import Gargantext.Prelude import Gargantext.Prelude
    import Data.Tuple.Nested ((/\))
    import Reactix as R import Reactix as R
    import Reactix.DOM.HTML as H import Reactix.DOM.HTML as H
    import Toestand as T import Toestand as T
    import Web.HTML.Event.EventTypes (offline)
    import Gargantext.Components.App.Data (Boxes) import Gargantext.Components.App.Data (Boxes)
    import Gargantext.Routes as GR
    import Gargantext.Types as GT
    import Gargantext.Utils.Reactix as R2 import Gargantext.Utils.Reactix as R2
    here :: R2.Here here :: R2.Here
    ...@@ -31,17 +27,9 @@ mainPageCpt = here.component "mainPage" cpt ...@@ -31,17 +27,9 @@ mainPageCpt = here.component "mainPage" cpt
    handed' <- T.useLive T.unequal handed handed' <- T.useLive T.unequal handed
    route' <- T.useLive T.unequal route route' <- T.useLive T.unequal route
    let classNameOffsetPre /\ className /\ classNameOffsetPost = case route' of pure $
    GR.PGraphExplorer _ _ -> "" /\ "col-md-12" /\ ""
    _ -> case handed' of H.div { id: "page-wrapper" }
    GT.LeftHanded -> "" /\ "col-md-10" /\ "col-md-2" [
    GT.RightHanded -> "col-md-2" /\ "col-md-10" /\ "" H.div { className: "container-fluid" } children
    pure $ H.div { className: "row" }
    [ H.div { className: classNameOffsetPre } []
    , H.div { className }
    [ H.div { id: "page-wrapper" }
    [ H.div { className: "container-fluid" } children ]
    ]
    , H.div { className: classNameOffsetPost } []
    ] ]
    src/Gargantext/Components/Router.purs
    View file @ da677223
    ...@@ -68,7 +68,7 @@ routerCpt = here.component "router" cpt where ...@@ -68,7 +68,7 @@ routerCpt = here.component "router" cpt where
    pure $ R.fragment pure $ R.fragment
    ([ loginModal { boxes } ([ loginModal { boxes }
    , topBar { boxes } ] <> , topBar { boxes } ] <>
    [ H.div { className: handedClassName } $ reverseHanded handed' $ [ H.div { className: handedClassName <> " router-inner" } $ reverseHanded handed' $
    [ forest { boxes } [ forest { boxes }
    , mainPage { boxes } , mainPage { boxes }
    , sidePanel { boxes } , sidePanel { boxes }
    ......
    src/Gargantext/Components/TopBar.purs
    View file @ da677223
    module Gargantext.Components.TopBar where module Gargantext.Components.TopBar where
    import Data.Foldable (intercalate) import Data.Foldable (intercalate)
    import Data.Tuple.Nested ((/\))
    import Reactix as R import Reactix as R
    import Reactix.DOM.HTML as H import Reactix.DOM.HTML as H
    import Toestand as T import Toestand as T
    ...@@ -27,7 +26,7 @@ topBarCpt = here.component "topBar" cpt ...@@ -27,7 +26,7 @@ topBarCpt = here.component "topBar" cpt
    cpt { handed, showTree } children = do cpt { handed, showTree } children = do
    handed' <- T.useLive T.unequal handed handed' <- T.useLive T.unequal handed
    pure $ H.div { className: "navbar navbar-expand-lg navbar-dark bg-dark fixed-top" pure $ H.div { className: "navbar navbar-expand-lg navbar-dark bg-dark"
    , id: "dafixedtop" , id: "dafixedtop"
    , role: "navigation" , role: "navigation"
    } }
    ......
    src/sass/_login.sass
    View file @ da677223
    #dafixedtop
    // correction for the popover
    z-index: 910
    // height: 60px
    //.logoSmall //.logoSmall
    // line-height: 15px // line-height: 15px
    // height: 10px // height: 10px
    ...@@ -15,7 +10,10 @@ ...@@ -15,7 +10,10 @@
    border: 3px solid white border: 3px solid white
    #page-wrapper #page-wrapper
    margin-top : 96px padding-top: 40px
    padding-left: 16px
    padding-right: 16px
    width: 100%
    #user-page-header #user-page-header
    border-bottom : 1px solid black border-bottom : 1px solid black
    ......
    src/sass/_menu.sass
    View file @ da677223
    ...@@ -6,6 +6,14 @@ ...@@ -6,6 +6,14 @@
    /* padding-bottom: 15px /* padding-bottom: 15px
    /* float: none /* float: none
    #dafixedtop
    position: sticky
    top: 0
    left: 0
    right: 0
    // correction for the popover
    z-index: 910
    #corporatop.nav-tabs > li #corporatop.nav-tabs > li
    padding-left: 1 padding-left: 1
    padding-right: 1 padding-right: 1
    ......
    src/sass/_styles.sass
    View file @ da677223
    ...@@ -101,3 +101,16 @@ ul ...@@ -101,3 +101,16 @@ ul
    .join-button .join-button
    padding-bottom: 100px padding-bottom: 100px
    padding-top: 100px padding-top: 100px
    #app
    width: 100%
    .router-inner
    display: flex
    &.left-handed
    flex-direction: row
    &.right-handed
    flex-direction: row
    src/sass/_tree.sass
    View file @ da677223
    ...@@ -153,6 +153,18 @@ li ...@@ -153,6 +153,18 @@ li
    opacity: var(--over50, 0) opacity: var(--over50, 0)
    #node-popup-tooltip #node-popup-tooltip
    // @XXX "react-awesome-popover" lack of parent host parameter
    //
    // hence, the popover will be added from within the overflow context
    // of component where its CTA lies, causing an issue with the hidden
    // overflow of its parent component
    //
    // to avoid a truncated popover, this position workaround has to be set
    // (so the popover will be hoisted to the overflow context of the window)
    //
    // @link https://gitlab.iscpif.fr/gargantext/purescript-gargantext/issues/302
    position: fixed
    .tree .tree
    .node .node
    margin-top: 5px margin-top: 5px
    ...@@ -160,6 +172,26 @@ li ...@@ -160,6 +172,26 @@ li
    .node .node
    padding-left: 15px padding-left: 15px
    // @XXX "react-awesome-popover" lack of parent host parameter
    //
    // as the container where the popover will be appended is actually a
    // a heighthy sidebar (which a large is hidden with a scrollbar),
    // the library tends to add the tooltip position in the middle of the
    // sidebar height: which can be off screen
    //
    // this workaround appends the tooltip in a static position
    .right-handed #node-popup-tooltip
    $offset-x: 16.6666666667% // simulate "col-2" sidebar attributes
    top: 50%
    left: $offset-x
    transform: translateY(-50%)
    .left-handed #node-popup-tooltip
    $offset-x: 16.6666666667% // simulate "col-2" sidebar attributes
    top: 50%
    right: $offset-x
    transform: translateY(-50%)
    .panel-actions .panel-actions
    .almost-useable .almost-useable
    color: orange color: orange
    ...@@ -172,16 +204,71 @@ li ...@@ -172,16 +204,71 @@ li
    // empirical value (see issue #308) // empirical value (see issue #308)
    max-height: 50vh max-height: 50vh
    overflow-y: scroll overflow-y: scroll
    .forest-layout-wrapper
    // removing Bootstrap "col" padding
    padding-left: 0
    padding-right: 0
    .forest-layout .forest-layout
    background-color: #fff $offset-y: 56px
    position: fixed
    top: 3.7em padding-top: 8px
    width: 15%
    z-index: 909 z-index: 909
    .left-handed
    .forest-layout // make the sidebar a scrollable component
    left: 80% // `max-width` rule is an addition due to Bootstrap "col-2" applied on its
    .right-handed // parent
    .forest-layout position: fixed
    left: 2% height: calc(100vh - #{ $offset-y })
    width: 100%
    max-width: inherit
    // avoiding ugly scrollbar
    scrollbar-width: none
    overflow-y: scroll
    overflow-x: visible
    &::-webkit-scrollbar
    display: none
    transition: border 150ms
    // UX addition: visually delimiting the sidebar on hover
    .right-handed .forest-layout
    border-right: 1px solid #FFFFFF
    &:hover
    border-right: 1px solid rgba(0, 0, 0, 0.1)
    .left-handed .forest-layout
    border-left: 1px solid #FFFFFF
    &:hover
    border-left: 1px solid rgba(0, 0, 0, 0.1)
    // UX best pratice: when a lengthy column is overflowy hidden (with a scroll), a teaser
    // UI element shows to the user that a scroll is possible
    .forest-layout-teaser
    $height: 24px // ~line-height to 1.5
    $width: 16.6666666667% // simulate "col-2" sidebar attributes
    $minus-parent-border: 1px // border size of the sidebar on hover
    pointer-events: none
    position: fixed
    bottom: 0
    height: $height
    width: calc(#{ $width } - #{ $minus-parent-border})
    background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 45%)
    .right-handed .forest-layout-teaser
    left: 0
    .left-handed .forest-layout-teaser
    right: 0
    .left-handed .forest-layout
    padding-left: 8px
    padding-right: 16px
    .right-handed .forest-layout
    padding-left: 16px
    padding-right: 8px
    Markdown is supported
    0% or
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment