You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@age.apache.org by hb...@apache.org on 2022/11/26 10:32:40 UTC
[age-viewer] branch main updated: Made Editor and Sidebar Responsive (#61)
This is an automated email from the ASF dual-hosted git repository.
hbshin pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/age-viewer.git
The following commit(s) were added to refs/heads/main by this push:
new b1f910d Made Editor and Sidebar Responsive (#61)
b1f910d is described below
commit b1f910decf69b433351f7b633791df6168368f49
Author: Ahmar Zaidi <71...@users.noreply.github.com>
AuthorDate: Sat Nov 26 16:02:35 2022 +0530
Made Editor and Sidebar Responsive (#61)
Co-authored-by: Hanbyeol Shin / David Shin / 신한별 <76...@users.noreply.github.com>
---
.../cytoscape/CypherResultCytoscapeLegend.jsx | 2 +-
.../src/components/cytoscape/CypherResultTab.jsx | 5 +-
frontend/src/components/frame/Frame.module.scss | 18 +++-
.../sidebar/presentations/SidebarComponents.jsx | 15 ++-
.../sidebar/presentations/SidebarHome.jsx | 114 ++++++++++-----------
frontend/src/static/style.css | 97 +++++++++++++-----
6 files changed, 162 insertions(+), 89 deletions(-)
diff --git a/frontend/src/components/cytoscape/CypherResultCytoscapeLegend.jsx b/frontend/src/components/cytoscape/CypherResultCytoscapeLegend.jsx
index d3d6bb7..0d62e89 100644
--- a/frontend/src/components/cytoscape/CypherResultCytoscapeLegend.jsx
+++ b/frontend/src/components/cytoscape/CypherResultCytoscapeLegend.jsx
@@ -171,7 +171,7 @@ class CypherResultCytoscapeLegend extends Component {
edgeBadges.forEach((value) => edgeLedgend.push(value));
return (
- <div className="legend-area" style={{ width: '80%' }}>
+ <div className="legend-area">
<div className="d-flex nodeLegend">
<div className={`mr-auto legends legend ${nodeLegendExpanded ? 'expandedLegend' : ''}`}>
<span>Node: </span>
diff --git a/frontend/src/components/cytoscape/CypherResultTab.jsx b/frontend/src/components/cytoscape/CypherResultTab.jsx
index e2e6285..5c2a142 100644
--- a/frontend/src/components/cytoscape/CypherResultTab.jsx
+++ b/frontend/src/components/cytoscape/CypherResultTab.jsx
@@ -47,10 +47,7 @@ class CypherResultTab extends Component {
}
};
return (
- <div style={{
- display: 'flex', flexDirection: 'row', width: '20%', height: '96px', border: 'solid 1px #C4C4C4',
- }}
- >
+ <div className="legend-button-area">
<button
className="btn"
type="button"
diff --git a/frontend/src/components/frame/Frame.module.scss b/frontend/src/components/frame/Frame.module.scss
index eea1812..914a635 100644
--- a/frontend/src/components/frame/Frame.module.scss
+++ b/frontend/src/components/frame/Frame.module.scss
@@ -83,7 +83,7 @@
}
.ButtonArea {
-
+ // margin: auto 18%;
}
.FullScreen {
@@ -133,3 +133,19 @@
.FullScreen .FlexContentWrapper {
height: 100% !important;
}
+
+/* ---------------------------------------------------
+ MEDIAQUERIES
+----------------------------------------------------- */
+
+@media (max-width: 670px) {
+
+ .FrameHeader{
+ display: block;
+ }
+
+ // .ButtonArea {
+ // margin: auto 18%;
+ // display: flex;
+ // }
+}
\ No newline at end of file
diff --git a/frontend/src/components/sidebar/presentations/SidebarComponents.jsx b/frontend/src/components/sidebar/presentations/SidebarComponents.jsx
index bd74ca6..977ed10 100644
--- a/frontend/src/components/sidebar/presentations/SidebarComponents.jsx
+++ b/frontend/src/components/sidebar/presentations/SidebarComponents.jsx
@@ -49,6 +49,19 @@ export const VerticalLine = () => (
/>
);
+export const HorizontalLine = () => (
+ <div
+ className="horizontalLine"
+ style={{
+ border: '1px solid #C4C4C4',
+ opacity: '1',
+ width: '80%',
+ height: '0',
+ margin: '3px auto',
+ }}
+ />
+);
+
const SubLabelRight = ({ label, classes }) => (
<div className={classes} style={StyleTextRight}>{label}</div>
);
@@ -92,7 +105,7 @@ const GraphSelectDropdown = ({
graphs.map(([gname, graphId]) => (<option value={graphId}>{gname}</option>))
);
return (
- <div>
+ <div id="graphSelectDropdown">
<Select onChange={handleGraphClick} placeholder="Select Graph" style={selectStyle} value={currentGraph}>
{options}
</Select>
diff --git a/frontend/src/components/sidebar/presentations/SidebarHome.jsx b/frontend/src/components/sidebar/presentations/SidebarHome.jsx
index 339e5cb..0e0db2f 100644
--- a/frontend/src/components/sidebar/presentations/SidebarHome.jsx
+++ b/frontend/src/components/sidebar/presentations/SidebarHome.jsx
@@ -26,7 +26,7 @@ import { connect, useDispatch } from 'react-redux';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faRedo, faTimes } from '@fortawesome/free-solid-svg-icons';
import {
- VerticalLine, SubLabelLeft, SubLabelRight, GraphSelectDropdown,
+ VerticalLine, HorizontalLine, SubLabelLeft, SubLabelRight, GraphSelectDropdown,
} from './SidebarComponents';
const genLabelQuery = (eleType, labelName, database) => {
@@ -333,66 +333,62 @@ const SidebarHome = ({
<br />
<PropertyList propertyKeys={propertyKeys} setCommand={setCommand} />
</div>
- <VerticalLine />
+ <div id="lastHorizontalLine">
+ <VerticalLine />
+ </div>
+ </div>
+ <div className="sidebar-item-disconnect-outer">
<div className="form-group sidebar-item-disconnect">
- <button
- className="frame-head-button refresh_button btn btn-link"
- type="button"
- onClick={() => refreshSidebarHome()}
- >
- <FontAwesomeIcon
- icon={faRedo}
- size="1x"
- color="white"
- flip="horizontal"
+ <div className="sidebar-item-disconnect-buttons">
+ <button
+ className="frame-head-button refresh_button btn btn-link"
+ type="button"
+ onClick={() => refreshSidebarHome()}
+ >
+ <FontAwesomeIcon
+ icon={faRedo}
+ size="1x"
+ color="white"
+ flip="horizontal"
+ />
+ </button>
+ <br />
+ <b>Refresh</b>
+ </div>
+ <HorizontalLine />
+ <div className="sidebar-item-disconnect-buttons">
+ <button
+ className="frame-head-button close_session btn btn-link"
+ type="button"
+ color="#142B80"
+ onClick={() => confirm({
+ title: 'Are you sure you want to close this window?',
+ onOk() {
+ requestDisconnect();
+ },
+ onCancel() {
+ return false;
+ },
+ })}
+ >
+ <FontAwesomeIcon
+ icon={faTimes}
+ size="1x"
+ color="white"
+ />
+ </button>
+ <br />
+ <b>Close Session</b>
+ </div>
+ <HorizontalLine />
+ <div className="sidebar-item-disconnect-buttons">
+ <GraphSelectDropdown
+ currentGraph={currentGraph}
+ graphs={graphs}
+ changeCurrentGraph={changeCurrentGraph}
+ changeGraphDB={changeGraph}
/>
- </button>
- <br />
- <b>Refresh</b>
- <div style={{
- border: '1px solid #C4C4C4',
- opacity: '1',
- width: '80%',
- height: '0',
- margin: '3px auto',
- }}
- />
- <button
- className="frame-head-button close_session btn btn-link"
- type="button"
- color="#142B80"
- onClick={() => confirm({
- title: 'Are you sure you want to close this window?',
- onOk() {
- requestDisconnect();
- },
- onCancel() {
- return false;
- },
- })}
- >
- <FontAwesomeIcon
- icon={faTimes}
- size="1x"
- color="white"
- />
- </button>
- <br />
- <b>Close Session</b>
- <div style={{
- border: '1px solid #C4C4C4',
- opacity: '1',
- width: '80%',
- height: '0',
- margin: '3px auto',
- }}
- />
- <GraphSelectDropdown
- currentGraph={currentGraph}
- graphs={graphs}
- changeCurrentGraph={changeCurrentGraph}
- changeGraphDB={changeGraph}
- />
+ </div>
</div>
</div>
</div>
diff --git a/frontend/src/static/style.css b/frontend/src/static/style.css
index 8b24d15..9566da7 100644
--- a/frontend/src/static/style.css
+++ b/frontend/src/static/style.css
@@ -68,21 +68,10 @@
body {
font-family: 'Poppins', sans-serif;
- padding-top: 90px;
+ /* padding-top: 90px; */
overflow: hidden;
}
-@media (min-width: 768px) {
- body {
- padding-top:0
- }
-}
-
-@media (min-width: 768px) {
- body {
- margin-left:80px
- }
-}
.wrapper {
display: flex;
@@ -144,7 +133,7 @@ body {
z-index: 10;
background-color: var(--sidebar-color);
transition: all 0.3s;
- margin-left: -320px;
+ /* margin-left: -320px; */
}
#sidebar.active {
margin: 0px 15px 0px 15px;
@@ -164,21 +153,41 @@ body {
color: #495057
}
+.sidebar-home {
+ display: flex;
+}
+
.sidebar-item {
width: 30%;
margin: 1.5rem 1rem 1.5rem 1rem;
}
+.sidebar-body {
+ width: 88%;
+ /* margin: 1.5rem 1rem 1.5rem 1rem; */
+}
+
.sidebar-item-disconnect {
- width: 10%;
+ width: 80%;
margin: 1.5rem 1rem 1.5rem 1rem;
text-align: center;
}
+.sidebar-item-disconnect-outer {
+ background-color: aliceblue;
+ margin: 0 1px 2.5px 1px;
+}
+
+#graphSelectDropdown {
+ display: grid;
+}
+
+
a[data-toggle="collapse"] {
position: relative;
}
+
/* ---------------------------------------------------
EDITOR STYLE
----------------------------------------------------- */
@@ -220,7 +229,7 @@ a[data-toggle="collapse"] {
}
.editor-button-wrapper {
- margin-left: -50px !important;
+ /* margin-left: -50px !important; */
height: 60px;
}
@@ -260,6 +269,17 @@ a[data-toggle="collapse"] {
flex-direction: row;
}
+.legend-area {
+ width: 80%;
+}
+
+.legend-button-area {
+ display: flex;
+ flex-direction: row;
+ width: 20%;
+ height: 96px;
+ border: solid 1px #C4C4C4;
+}
/* ---------------------------------------------------
@@ -274,6 +294,7 @@ a[data-toggle="collapse"] {
color: #142B80;
margin: 0px 4px 4px 4px;
}
+
.node-item:hover{
background-color: #2756FF;
border: 1px solid #2756FF;
@@ -291,6 +312,7 @@ a[data-toggle="collapse"] {
color: #142B80;
margin: 0px 4px 4px 4px;
}
+
.edge-item:hover {
background-color: #2756FF;
border: 1px solid #2756FF;
@@ -308,6 +330,7 @@ a[data-toggle="collapse"] {
color: #142B80;
margin: 0px 4px 4px 4px;
}
+
.propertie-item:hover {
background-color: #2756FF;
background: #2756FF 0% 0% no-repeat padding-box;
@@ -320,24 +343,52 @@ a[data-toggle="collapse"] {
MEDIAQUERIES
----------------------------------------------------- */
-@media (max-width: 768px) {
- #sidebar {
- margin-left: -320px;
+@media (max-width: 1130px) {
+ #sidebarCollapse span {
+ display: none;
}
- #sidebar.active {
- margin-left: 0;
+
+ #lastHorizontalLine {
+ visibility: collapse;
}
- #content {
+
+ .sidebar-home {
+ display: block;
+ }
+
+ .sidebar-body {
width: 100%;
}
+
+ .horizontalLine {
+ visibility: collapse;
+ }
+
+ .sidebar-item-disconnect {
+ display: flex;
+ width: 75%;
+ margin: 0 auto;
+ }
+
+ .sidebar-item-disconnect-buttons {
+ margin-top: 2%;
+ }
+
+}
+
+@media (max-width: 1190px) {
#content.active {
width: calc(100% - 320px);
}
- #sidebarCollapse span {
- display: none;
+}
+
+@media (max-width: 670px) {
+ .legend-button-area {
+ width: 35%;
}
}
+
.btn-link {
color: #c4c4c4 !important;
}