Skip to content

Commit

Permalink
merged from d3bootstrap_frontdev
Browse files Browse the repository at this point in the history
  • Loading branch information
@schiwaa
schiwaa committed Jan 3, 2025
2 parents 17766e1 + 3fff40d commit 8424ae1
Show file tree
Hide file tree
Showing 22 changed files with 1,708 additions and 1,692 deletions.
2,194 changes: 567 additions & 1,627 deletions frontend-e2e/package-lock.json
View file

Large diffs are not rendered by default.

47 changes: 33 additions & 14 deletions frontend/www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,14 +116,10 @@
<stemmaweb-navigation></stemmaweb-navigation>
<div class="container-fluid">
<div class="row">
<nav
id="sidebarMenu"
class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"
>
<div class="position-sticky pt-3">
<div id="sidebar-menu" class="col-2 sidebar-menu bg-light footer-branding collapse show">
<div class="position-sticky pt-2">
<h6
class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"
>
class="sidebar-menu-heading d-flex justify-content-between align-items-center px-3 mt-2 mb-1 text-muted">
<span>Text directory</span>
<a
class="link-secondary"
Expand All @@ -137,16 +133,14 @@
</h6>
<tradition-list></tradition-list>
</div>
</nav>
</div>

<main class="col-md-9 col-lg-7 ms-md-perc px-md-4">
<div id="main" class="col-7">
<tradition-view></tradition-view>
</main>
</div>

<div
id="sidebar-properties"
class="col-md-3 d-md-block col-lg-3 bg-light sidebar-properties"
>
<div id="sidebar-properties" class="col-3 sidebar-properties bg-light">
<relation-types></relation-types>
<property-table-view id="property-table-view"></property-table-view>
<section-properties-view></section-properties-view>
<stemweb-job-status></stemweb-job-status>
Expand Down Expand Up @@ -205,8 +199,13 @@
src="src/js/modules/dashboard/tradition/stemma/stemmaRenderer.js"
type="application/javascript"
></script>
<script
src="src/js/modules/dashboard/relationmapper/relationRenderer.js"
type="application/javascript"
></script>
<script src="./src/js/config.js" type="application/javascript"></script>


<!-- State -->
<script
src="./src/js/modules/common/state/store.js"
Expand Down Expand Up @@ -323,6 +322,26 @@
src="./src/js/modules/dashboard/tradition/messageConsole.js"
type="application/javascript"
></script>
<script
src="./src/js/modules/dashboard/relationmapper/relationMapper.js"
type="application/javascript"
></script>
<script
src="./src/js/modules/dashboard/relationmapper/sectionSelectors.js"
type="application/javascript"
></script>
<script
src="./src/js/modules/dashboard/relationmapper/relationTypes.js"
type="application/javascript"
></script>
<script
src="./src/js/modules/dashboard/relationmapper/deleteRelationType.js"
type="application/javascript"
></script>
<script
src="./src/js/modules/dashboard/relationmapper/editRelationType.js"
type="application/javascript"
></script>

</body>
</html>
195 changes: 179 additions & 16 deletions frontend/www/src/css/dashboard-stemmaweb.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,62 @@
--bs-btn-disabled-border-color: #adb5bf;
}

.relation-colors {
--color-sky: #a6cee3;
--color-blue: #1f78b4;
--color-mint: #b2df8a;
--color-green: #33a02c;
--color-pink: #fb9a99;
--color-red: #e31a1c;
--color-peach: #fdbf6f;
--color-orange: #ff7f00;
--color-plum: #cab2d6;
--color-purple: #6a3d9a;
--color-lemon: #ffff99;
--color-brown: #b15928;
}

span.relation-colors.color-sky svg.feather.feather-square {
fill: var(--color-sky);
}
span.relation-colors.color-blue svg.feather.feather-square {
fill: var(--color-blue);
}
span.relation-colors.color-mint svg.feather.feather-square {
fill: var(--color-mint);
}
span.relation-colors.color-green svg.feather.feather-square {
fill: var(--color-green);
}
span.relation-colors.color-pink svg.feather.feather-square {
fill: var(--color-pink);
}
span.relation-colors.color-red svg.feather.feather-square {
fill: var(--color-red);
}
span.relation-colors.color-peach svg.feather.feather-square {
fill: var(--color-peach);
}
span.relation-colors.color-orange svg.feather.feather-square {
fill: var(--color-orange);
}
span.relation-colors.color-plum svg.feather.feather-square {
fill: var(--color-plum);
}
span.relation-colors.color-purple svg.feather.feather-square {
fill: var(--color-purple);
}
span.relation-colors.color-lemon svg.feather.feather-square {
fill: var(--color-lemon);
}
span.relation-colors.color-brown svg.feather.feather-square {
fill: var(--color-brown);
}

.brand-dark {
color: rgba(255, 255, 255, 0.7);
}
.bg-light {
/* Using `static` prefix to make sure that we use the static folder served by Flask */
.footer-branding {
background-image: url('../../images/logo-light.svg');
background-position: left bottom;
background-repeat: no-repeat;
Expand All @@ -22,6 +73,88 @@
font-size: 1em;
}

/*
* Main
*/
#main {
margin-left: calc((2*100vw/12));
padding: 0% 1.5% 0% 1.5%;
}

#main.col-7 {
transition: width 1s, margin 1s;
}

#main.col-9 {
margin-left: 0;
transition: width 1s, margin 1s;
transition-delay: 500ms, 500ms;
}

/*
* Sidebar
*/
.sidebar-menu {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0px 0px 0px; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
}

.sidebar-menu-sticky {
top: 0;
height: calc(100vh - 48px);
padding-top: 0.5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar-menu .nav-link {
font-weight: 500;
color: #333;
}

.sidebar-menu .nav-link .feather {
margin-right: 4px;
color: #727272;
}

.sidebar-menu .nav-link.active {
color: #2470dc;
}

.sidebar-menu .nav-link:hover .feather,
.sidebar-menu .nav-link.active .feather {
color: inherit;
}

.sidebar-menu-heading {
font-size: 0.75rem;
text-transform: uppercase;
}

/*
* Sidebar properties
*/
.sidebar-properties {
background: none;
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0px 0px 0px; /* Height of navbar */
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);
overflow-y: scroll;
}


/*
* Stemma buttons
*/
#stemma-buttons-container {
width: 100%;
}
Expand All @@ -32,6 +165,10 @@ edit-stemma-buttons {
align-items: flex-start;
}

#edit-stemma-buttons-right .greyed-out {
pointer-events: none;
}

#stemma-selector-buttons {
width: 50%;
display: flex;
Expand Down Expand Up @@ -187,12 +324,12 @@ edit-stemma-buttons a.greyed-out div {
transition: width 0.4s ease-in-out;
}

#stemma-selectors {
#stemma-selectors, #section-selectors {
display: flex;
justify-content: flex-start;
}

.stemma-selector.selected svg {
.stemma-selector.selected svg, .section-selector.selected svg {
fill: rgb(210,210,210);
}

Expand All @@ -207,17 +344,6 @@ edit-stemma-buttons a.greyed-out div {
}
}

.sidebar-properties {
background: none;
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);
}

.modal-backdrop {
background-color: #fff;
}
Expand Down Expand Up @@ -324,13 +450,14 @@ section-list ul li.dragging-highlight {

.tradition-property-value-cell, .section-property-value-cell {
width: 100%;
overflow-wrap: anywhere;
}

social-login-options .btn {
font-size: calc( var(--bs-btn-font-size) * 4);
}

delete-section-button .btn-outline-danger {
delete-section-button .btn-outline-danger, delete-relation-type-button .btn-outline-danger {
color: var(--bs-btn-color);
padding-right: 0.5em;
}
Expand All @@ -351,3 +478,39 @@ delete-section-button .btn-outline-danger {
#message-console-text-panel .console-message.danger {
color: #d5465a;
}

relation-mapper {
display: none;
opacity: 0;
width: 100%;
}

/* relation-types div {
display: none;
opacity: 0;
} */

.relation-type-name-cell {
width: 100%;
}

.relation-type-buttons-cell {
white-space: nowrap;
}

button.selected-view {
color: #fff;
background-color: #87aade;
}

#section-title {
font-size: 140%;
}

#section-loader-spinner {
display: none;
}

#section-loader-spinner.show {
display: inline;
}
Loading

0 comments on commit 8424ae1

Please sign in to comment.