From 43b6e4ba01f49567d9298e4bb764a2c064c68069 Mon Sep 17 00:00:00 2001 From: ROHITESH-KUMAR-JAIN Date: Sun, 13 Dec 2020 16:05:32 +0530 Subject: [PATCH] Interface page Styled --- omw/static/css/gwg.css | 39 +++++++++++++++++--------- omw/static/js/common.js | 6 +++- omw/templates/doc/interface.html | 48 ++++++++++++++++---------------- omw/templates/omw.html | 4 +-- 4 files changed, 57 insertions(+), 40 deletions(-) diff --git a/omw/static/css/gwg.css b/omw/static/css/gwg.css index 6b2f49a..b8f0ef3 100644 --- a/omw/static/css/gwg.css +++ b/omw/static/css/gwg.css @@ -358,27 +358,40 @@ you want to use a border */ .vertical-menu { max-width: 100%; /* Makes the menu responsive */ + background-color: #f5f2f2; } -.vertical-menu a { - background-color: #eee; /* Grey background color */ - color: black; /* Black text color */ - display: block; /* Make the links appear below each other */ - padding: 12px; /* Add some padding */ - text-decoration: none; /* Remove underline from links */ +.vertical-menu a, .vertical-menu-dropdown-btn { + padding: 6px 8px 6px 16px; + text-decoration: none; + font-size: 20px; + color: black; + display: block; + border: none; + background: none; + width:100%; + text-align: left; + cursor: pointer; + outline: none; } -.vertical-menu a:hover { - background-color: #ccc; /* Dark grey background on mouse-over */ +.vertical-menu a:hover, .vertical-menu-dropdown-btn:hover { + color: brown; } -.vertical-menu a.active { - background-color: #069ae9; /* Add a blue color to the OMW link */ - color: white; +.fa-caret-down { + float: right; + padding-right: 8px; +} + +.vertical-menu-dropdown-container { + display: none; + background-color: #e9e6e6; + padding-left: 8px; } -#interface-vertical-menu{ - /* this is for specifically styling the vertical menu in the interface page */ +.show-vertical-menu-dropdown { + display:block; } .back-to-top-button { /* This class is for styling the back to the top botton */ diff --git a/omw/static/js/common.js b/omw/static/js/common.js index b85877e..4dc7299 100644 --- a/omw/static/js/common.js +++ b/omw/static/js/common.js @@ -213,4 +213,8 @@ function openNav() { /* Set the width of the side navigation to 0 */ function closeNav() { document.getElementById("mySidenav").style.width = "0"; -} \ No newline at end of file +} + +function showfunction(){ + document.getElementById("vertical-menu-dropdown").classList.toggle("show-vertical-menu-dropdown"); +} diff --git a/omw/templates/doc/interface.html b/omw/templates/doc/interface.html index 1ccc835..2d8662d 100644 --- a/omw/templates/doc/interface.html +++ b/omw/templates/doc/interface.html @@ -6,13 +6,14 @@

OMW Interface Documentation

This page provides documentation for the web interface to the Open Multilingual Wordnet. -