Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/style vulcan #99

Open
wants to merge 3 commits into
base: feature/vulcan-search
Choose a base branch
from
Open

Feature/style vulcan #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c2b31ec
Styling WIP
XanderVertegaal Jan 23, 2025
d36cb24
Fix hrefs
XanderVertegaal Jan 27, 2025
ba89d90
Button styling
XanderVertegaal Jan 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .editorconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,5 @@ root = true
indent_style = space
indent_size = 4
charset = utf-8
insert_final_newline = true
insert_final_newline = false
trim_trailing_whitespace = true
199 changes: 164 additions & 35 deletions backend/vulcan/templates/vulcan/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,175 @@
<!DOCTYPE html>
<html>
<head>
<html data-theme="light">
<head>
<title>Graph visualization</title>
<link
rel="stylesheet"
type="text/css"
href="/vulcan-static/style.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script>
<script
type="text/javascript"
src="https://d3js.org/d3.v5.min.js"
></script>
</head>

<title>Graph visualization</title>
<body>
<nav
class="navbar is-dark"
role="navigation"
aria-label="main navigation"
>
<div class="container">
<div class="navbar-brand">
<strong class="navbar-item"> ParsePort </strong>
</div>

<link rel="stylesheet" type="text/css" href="/vulcan-static/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script>
<script type=text/javascript src="https://d3js.org/d3.v5.min.js"></script>
<div class="navbar-menu">
<ul class="navbar-start">
{% comment %} Do these hrefs work on the server? 🤷‍♂️ {% endcomment %}
<a class="navbar-item" href="/home">
Home
</a>

</head>
<li class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/spindle">
Spindle/Æthel
</a>

<body>
<ul class="navbar-dropdown">
<li>
<a class="navbar-item" href="/spindle">
Spindle
</a>
</li>
<li>
<a class="navbar-item" href="/aethel">
Æthel
</a>
</li>
<li>
<a class="navbar-item" href="/spindle/about">
About
</a>
</li>
<li>
<a class="navbar-item" href="/spindle/notation">
Notation
</a>
</li>
<li>
<a class="navbar-item" href="/spindle/references">
References
</a>
</li>
</ul>
</li>

<h2>VULCAN visualization</h2>
<div id="headerId">
<button id="previousButton">&lt;Previous</button>
<button id="nextButton">Next&gt;</button>
<!--input text field with width 50 and right alignment-->
<!--restricting to numbers as per
https://stackoverflow.com/questions/13952686/how-to-make-html-input-tag-only-accept-numerical-values
(somewhere a bit down)-->
<input style="text-align: right" type="text" size="5" id="corpusPositionInput" value="0"
onkeypress="
return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))">
<div style="display: inline;" id="corpusPositionText"></div>
<button id="searchButton" style="margin-left: 30px">Search</button>
<button id="clearSearchButton" style="margin-left: 5px">Clear Search</button>
</div>
<li class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/minimalist-parser">
Minimalist Parser
</a>

<div id="chartId"></div>
<ul class="navbar-dropdown">
<li>
<a class="navbar-item" href="/minimalist-parser">
Home
</a>
</li>
<li>
<a class="navbar-item" href="/minimalist-parser/parse">
Parse sentence
</a>
</li>
<li>
<a class="navbar-item" href="/minimalist-parser/browse">
Browse parsed corpus
</a>
</li>
<li>
<a class="navbar-item" href="/minimalist-parser/about">
About
</a>
</li>
<li>
<a class="navbar-item" href="/minimalist-parser/references">
References
</a>
</li>
</ul>
</li>

<a class="navbar-item" href="/about">
About
</a>
</ul>
</div>
</div>
</nav>

<div class="vulcan-container">
<h1 class="vulcan-title">VULCAN visualization</h1>
<div id="headerId" class="button-bar">
<button id="previousButton" class="button">&lt; Previous</button>
<button id="nextButton" class="button">Next &gt;</button>
<!--input text field with width 50 and right alignment-->
<!--restricting to numbers as per
https://stackoverflow.com/questions/13952686/how-to-make-html-input-tag-only-accept-numerical-values
(somewhere a bit down)-->
<input
style="text-align: right"
type="text"
size="5"
id="corpusPositionInput"
value="0"
onkeypress="
return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
/>
<div class="corpus-position-container"><button id="corpusPositionText" class="corpus-position"></button></div>
<button id="searchButton" class="button">Search</button>
<button id="clearSearchButton" class="button">
Clear Search
</button>
</div>
<div id="chartId"></div>
</div>

<script type="application/javascript" src="/vulcan-static/definitions.js"></script>
<script type="application/javascript" src="/vulcan-static/node.js"></script>
<script type="application/javascript" src="/vulcan-static/graph.js"></script>
<script type="application/javascript" src="/vulcan-static/table.js"></script>
<script type="application/javascript" src="/vulcan-static/label_alternatives.js"></script>
<script type="application/javascript" src="/vulcan-static/mouseover_texts.js"></script>
<script type="application/javascript" src="/vulcan-static/search.js"></script>
<script type="application/javascript" src="/vulcan-static/baseScript.js"></script>


</body>
<script
type="application/javascript"
src="/vulcan-static/definitions.js"
></script>
<script
type="application/javascript"
src="/vulcan-static/node.js"
></script>
<script
type="application/javascript"
src="/vulcan-static/graph.js"
></script>
<script
type="application/javascript"
src="/vulcan-static/table.js"
></script>
<script
type="application/javascript"
src="/vulcan-static/label_alternatives.js"
></script>
<script
type="application/javascript"
src="/vulcan-static/mouseover_texts.js"
></script>
<script
type="application/javascript"
src="/vulcan-static/search.js"
></script>
<script
type="application/javascript"
src="/vulcan-static/baseScript.js"
></script>
</body>
</html>
1 change: 1 addition & 0 deletions vulcan-static/search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -638,6 +638,7 @@ function drawSearchNowButton() {
performSearch(true)
})
.attr("class", "searchNowButton")
.attr("class", "button")
// make the button stand out a bit more
searchNowButton.style("background-color", "white")
searchNowButton.style("border-color", "black")
Expand Down
62 changes: 51 additions & 11 deletions vulcan-static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,54 @@
.svg-container {
display: inline-block;
position: relative;
/*width: 100%;*/
/*padding-bottom: 100%;*/
vertical-align: top;
/*overflow: visible;*/
display: inline-block;
position: relative;
/*width: 100%;*/
/*padding-bottom: 100%;*/
vertical-align: top;
/*overflow: visible;*/
}
.svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}

/** Additions by the UU Research Software Lab below. */

html {
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

strong.navbar-item {
font-weight: 700;
}

.vulcan-container {
margin: 0 2em;
}

.vulcan-title {
margin: 2em 0;
color: hsl(0, 0%, 21%);
font-weight: 600;
line-height: 1.125;
}

.button-bar {
display: flex;
align-items: stretch;
justify-content: flex-start;
gap: 1em;
}

.corpus-position-container {
display: flex;
align-items: center;
}

.vulcan-title {
font-size: 2em;
margin-bottom: 1em;
}