diff --git a/modules/browser/src/screens/gm.ts b/modules/browser/src/screens/gm.ts
index de7cbae17..30001472e 100644
--- a/modules/browser/src/screens/gm.ts
+++ b/modules/browser/src/screens/gm.ts
@@ -20,6 +20,7 @@ import { targetRadarWidget } from '../widgets/target-radar';
// enable pixi dev-tools
// https://chrome.google.com/webstore/detail/pixijs-devtools/aamddddknhcagpehecnhphigffljadon
// window.PIXI = PIXI;
+
const driver = new Driver(window.location);
const gmWidgets = new GmWidgets(driver);
const dashboard = new Dashboard(
@@ -40,6 +41,20 @@ const dashboard = new Dashboard(
$('#menuContainer')
);
+// Navot added jQuery
+$('#collapseSidebar').on('click', function () {
+ $('#menuContainer').toggleClass('collapsed');
+ $('#collapseSidebar').toggleClass('collapsed');
+ $('#layoutContainer').toggleClass('collapsed');
+ $('#wrapper').toggleClass('collapsed');
+ const basic: number = $(window).width() || 1920;
+ if ($('#wrapper').hasClass('collapsed')) {
+ dashboard.updateSize($(window).width(), $(window).height());
+ } else {
+ dashboard.updateSize(basic * 0.8, $(window).height());
+ }
+});
+
dashboard.registerWidget(gmWidgets.radar);
dashboard.registerWidget(gmWidgets.tweak);
diff --git a/modules/browser/templates/sidebar.html b/modules/browser/templates/sidebar.html
index 32ce3d76a..b6e30891c 100644
--- a/modules/browser/templates/sidebar.html
+++ b/modules/browser/templates/sidebar.html
@@ -12,6 +12,7 @@
diff --git a/static/styles/index.css b/static/styles/index.css
index 01b41a3df..30413bf37 100644
--- a/static/styles/index.css
+++ b/static/styles/index.css
@@ -1,111 +1,171 @@
@font-face {
- font-family: "Bebas";
- src: url(../fonts/BebasNeue-Regular.ttf);
+ font-family: 'Bebas';
+ src: url(../fonts/BebasNeue-Regular.ttf);
}
@font-face {
- font-family: "Electrolize";
- src: url(../fonts/Electrolize-Regular.ttf);
+ font-family: 'Electrolize';
+ src: url(../fonts/Electrolize-Regular.ttf);
}
@font-face {
- font-family: "Titillium Web";
- src: url(../fonts/TitilliumWeb-Regular.ttf);
+ font-family: 'Titillium Web';
+ src: url(../fonts/TitilliumWeb-Regular.ttf);
}
@font-face {
- font-family: 'Material Icons';
- font-style: normal;
- font-weight: 400;
- src: url(../fonts/MaterialIcons-Regular.woff2) format('woff2');
+ font-family: 'Material Icons';
+ font-style: normal;
+ font-weight: 400;
+ src: url(../fonts/MaterialIcons-Regular.woff2) format('woff2');
}
.material-icons {
- font-family: 'Material Icons';
- font-weight: normal;
- font-style: normal;
- font-size: 18px; /* Preferred icon size */
- display: inline-block;
- line-height: 1;
- text-transform: none;
- letter-spacing: normal;
- word-wrap: normal;
- white-space: nowrap;
- direction: ltr;
- -webkit-font-feature-settings: 'liga';
- /* Support for all WebKit browsers. */
- -webkit-font-smoothing: antialiased;
- /* Support for Safari and Chrome. */
- text-rendering: optimizeLegibility;
+ font-family: 'Material Icons';
+ font-weight: normal;
+ font-style: normal;
+ font-size: 18px; /* Preferred icon size */
+ display: inline-block;
+ line-height: 1;
+ text-transform: none;
+ letter-spacing: normal;
+ word-wrap: normal;
+ white-space: nowrap;
+ direction: ltr;
+ -webkit-font-feature-settings: 'liga';
+ /* Support for all WebKit browsers. */
+ -webkit-font-smoothing: antialiased;
+ /* Support for Safari and Chrome. */
+ text-rendering: optimizeLegibility;
- /* Support for Firefox. */
- -moz-osx-font-smoothing: grayscale;
+ /* Support for Firefox. */
+ -moz-osx-font-smoothing: grayscale;
- /* Support for IE. */
- font-feature-settings: 'liga';
+ /* Support for IE. */
+ font-feature-settings: 'liga';
+}
+.material-icons {
+ color: rgba(255, 255, 255, 1);
+}
+.material-icons.md-inactive {
+ color: rgba(255, 255, 255, 0.3);
}
-.material-icons { color: rgba(255, 255, 255, 1); }
-.material-icons.md-inactive { color: rgba(255, 255, 255, 0.3); }
h2 {
- /* font: 14px Arial, sans-serif; */
- color: #fff;
- padding: 10px;
- text-align: center;
+ /* font: 14px Arial, sans-serif; */
+ color: #fff;
+ padding: 10px;
+ text-align: center;
}
html,
body {
- height: 100%;
+ height: 100%;
}
* {
- margin: 0;
- padding: 0;
- list-style-type: none;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
}
#wrapper {
- height: 100%;
- position: relative;
- width: 100%;
- overflow: auto;
+ height: 100%;
+ max-height: 100vh;
+ position: relative;
+ width: 100%;
+ overflow: auto;
}
-#menuContainer {
- width: 20%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- background: #222;
+#collapseSidebar {
+ width: 30px;
+ background-color: #333;
+ height: 30px;
+ left: calc(20% - 54px);
+ top: 20px;
+ z-index: 10;
+ position: absolute;
+ border-radius: 20px;
+ box-shadow: 0 0 4px greenyellow, 0 0 4px greenyellow, 0 0 4px greenyellow, 0 0 4px greenyellow;
+ transition: all ease 0.2s;
+}
+#collapseSidebar.collapsed {
+ left: 4px;
+ transition: all ease 0.2s;
+ background-color: greenyellow;
}
+#collapseSidebar:hover {
+ width: 30px;
+ background-color: greenyellow;
+ height: 30px;
+ top: 20px;
+ z-index: 10;
+ position: absolute;
+ border-radius: 20px;
+ box-shadow: 0 0 4px greenyellow, 0 0 4px greenyellow, 0 0 4px greenyellow, 0 0 4px greenyellow, 0 0 4px greenyellow,
+ 0 0 4px greenyellow, 0 0 4px greenyellow;
+ transition: all ease 0.2s;
+}
+#collapseSidebar:focus {
+ background-color: greenyellow;
+ box-shadow: 0 0 4px greenyellow, 0 0 4px greenyellow, 0 0 4px greenyellow, 0 0 4px greenyellow, 0 0 4px greenyellow,
+ 0 0 4px greenyellow, 0 0 4px greenyellow;
+ transition: all ease 0.2s;
+}
+#menuContainer {
+ width: 20%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: #222;
+ max-height: 100vh;
+ overflow: scroll;
+ overflow-x: hidden;
+ transition: all 0.3s ease;
+}
+#menuContainer.collapsed {
+ width: 0%;
+ transition: all 0.3s ease;
+}
#menuContainer li {
- cursor: move;
- border-bottom: 1px solid #000;
- border-top: 1px solid #333;
- cursor: pointer;
- padding: 10px 5px;
- color: #bbb;
- background: #1a1a1a;
- /* font: 12px Arial, sans-serif; */
+ cursor: move;
+ border-bottom: 1px solid #000;
+ border-top: 1px solid #333;
+ cursor: pointer;
+ padding: 10px 5px;
+ color: #bbb;
+ background: #1a1a1a;
+ /* font: 12px Arial, sans-serif; */
}
#menuContainer li:hover {
- background: #111;
- color: #ccc;
+ background: #111;
+ color: #ccc;
}
#layoutContainer {
- width: 80%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 20%;
- box-shadow: -3px 0px 9px 0px rgba(0, 0, 0, 0.4);
+ width: 80%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 20%;
+ box-shadow: -3px 0px 9px 0px rgba(0, 0, 0, 0.4);
+ transition: 0.3s all ease;
}
+#layoutContainer.collapsed {
+ width: 100%;
+ left: 0;
+ transition: 0.3s all ease;
+}
+.lm_root {
+ width: 80%;
+}
+.lm_root.collapsed {
+ width: 100vw !important;
+}
.lm_content {
- overflow-y: auto;
-}
\ No newline at end of file
+ overflow-y: auto;
+}