Skip to content

updated GUI #4

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

Open
JanKeesSchakel wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

updated GUI #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bcf72bd
updated GUI
Jul 23, 2025
0299669
adjusted heigth
Jul 23, 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
4 changes: 2 additions & 2 deletions server.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ library(promises)

# load the sensincluesr package
library(devtools)
devtools::install_github("sensingclues/sensingcluesr@v1.0.3", upgrade = "never")
#library(sensingcluesr)
#devtools::install_github("sensingclues/sensingcluesr@v1.0.3", upgrade = "never")
library(sensingcluesr)
# dynamic color maps for more then 12 colors
library(colorRamps)

Expand Down
24 changes: 10 additions & 14 deletions ui.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,15 +76,10 @@ ui <- fluidPage(
)
)
),
div(class = "content",
sidebarLayout(
sidebarPanel(
width = 3,
HTML(
paste0(
"<br>",
"<br>"
)
),
# --- Collapsible About Box ---
tags$head(
tags$link(rel = "stylesheet", href = "https://fonts.googleapis.com/icon?family=Material+Icons"),
Expand Down Expand Up @@ -225,11 +220,11 @@ ui <- fluidPage(
width = 9,
tags$head(tags$style(
# Corrected escaping for the CSS content within HTML()
HTML(".sep {
width: 20px;
height: 1px;
float: left;
}")
# HTML(".sep {
# width: 20px;
# height: 1px;
# float: left;
# }")
)),
tabsetPanel(
type = "tabs",
Expand All @@ -245,7 +240,7 @@ ui <- fluidPage(

# Time Interval Box
div(
style = "width: 100px;",
style = "width: 150px;",
selectInput(
inputId = "time_input",
label = i18n$t("Time interval"),
Expand All @@ -265,7 +260,7 @@ ui <- fluidPage(
div(
style = "display: flex; align-items: center; gap: 20px;",
div(
style = "width: 100px;",
style = "width: 150px;",
numericInput(
"num_seasons",
"# Seasons:",
Expand Down Expand Up @@ -299,7 +294,7 @@ ui <- fluidPage(

# Top X Filter Box (match width to Time Interval box)
div(
style = "width: 100px;",
style = "width: 150px;",
numericInput(
inputId = "topX",
label = "Top rows:",
Expand Down Expand Up @@ -384,5 +379,6 @@ ui <- fluidPage(
)
)
)
)
)
)
36 changes: 34 additions & 2 deletions www/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,30 @@ body {

}

.container-fluid {
padding-left: 0;
padding-right: 0;
}
.row {
margin-left: 5px;
margin-right: 5px;
}
.row > [class*="col-"] {
padding-left: 0px;
padding-right: 5px;
}



/* ============================
Header (20% viewport height with 10% horizontal padding)
============================ */
.header {
display: flex;
align-items: center; /* Center elements vertically */
align-items: flex-start;
justify-content: space-between; /* Distribute items across the header */
background-color: #004d40;
height: 11vh;
height: 20vh;
padding: 2rem 7vw; /* Adjust horizontal padding */
border-bottom: 2px solid #00332b;
position: relative;
Expand All @@ -52,6 +66,24 @@ body {
text-align: center; /* Center the title text */
}

body {
z-index: 1000;
position: relative; /* z-index only works on positioned elements */
}

.content {
position: relative; /* enable positioning */
top: -10vh; /* pull up over the header by 20px (adjust as needed) */
margin: 0 50px; /* xx px left/right margins */
z-index: 2; /* above .header (which should be z-index:1 or 0) */
background: white; /* or whatever bg you need */
border-radius: 10px; /* rounded corners */
box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* optional drop-shadow */
overflow: hidden; /* clip child content to rounded corners */
height: 90vh; /* hoogte = xx% van viewport */
overflow-y: auto; /* scrollen als inhoud groter is */
}


.well {
background-color: #ECEFF1;
Expand Down