TAK-66 calculator css

app/calculator.R

@@ -7,31 +7,46 @@ library(DT)
 calculatorUI <- function(id){
   ns <- NS(id)
   fluidPage(
-  titlePanel("Kalkulator wskaźnika ryzyka nowotworu jajnika (IOTA LR2)"),
-  sidebarLayout(
-    sidebarPanel(
-      sliderInput("slider1", strong("Wiek pacjenta:"),min = 14, max = 100, value = 40),
-      selectInput("select1",strong("Obecność wodobrzusza:"),choices = list("Nie"=0,"Tak"=1),selected=0),
-      selectInput("select2",strong("Obecność przepływu krwi w projekcji brodawkowatej:"),choices = list("Nie"=0,"Tak"=1),selected=0),
-      sliderInput("slider2", strong("Największa średnica elementu stałego (w mm):"),min = 0, max = 200, value = 0),
-      selectInput("select3",strong("Nieregularna wewnętrzna ściana torbieli:"),choices = list("Nie"=0,"Tak"=1),selected=0),
-      selectInput("select4",strong("Obecność cieni akustycznych:"),choices = list("Nie"=0,"Tak"=1),selected=0),
-      actionButton("update" ,"Oblicz"),
-      downloadButton("report", "Generuj raport")
-    ),
   
-    mainPanel(
-      p("Aplikacja przeznaczona jest dla lekarzy ginekologów i wdraża wskaźnik złośliwości nowotworu jajnika w oparciu o algorytm IOTA LR2. Wizualizuje również wynik regresji logistycznej."),
-      p("Szczegółowy opis algorytmu znajduje się w artykule: Timmerman D, Testa AC, Bourne T, [i in.]. Model regresji logistycznej do rozróżniania łagodnych i złośliwych guzów przydatków przed operacją: wieloośrodkowe badanie przeprowadzone przez International Ovarian Tumor Analysis Group. J Clin Oncol. 2005, 23, 8794-8801."),
-      p("Ogólnie algorytm LR2 przewiduje, że nowotwór jest łagodny, gdy pacjent jest młody, lity składnik zmiany jest mały i występują cienie akustyczne. Możesz to sprawdzić empirycznie za pomocą różnych kombinacji wartości wejściowych."),
-      p("Wypełnij formularz i kliknij",strong("Oblicz")," "),
   
-      htmlOutput("selected_var"),
-      htmlOutput("var"),
-      br(),
-      plotlyOutput("wykres")
-    )
-  )
+  fluidRow(
+    column(3,
+           tags$div("Panel sterowania") %>% tagAppendAttributes(class="panel-title"),
+           wellPanel(
+             sliderInput("slider1", strong("Wiek pacjenta:"),min = 14, max = 100, value = 40),
+             selectInput("select1",strong("Obecność wodobrzusza:"),choices = list("Nie"=0,"Tak"=1),selected=0),
+             selectInput("select2",strong("Obecność przepływu krwi w projekcji brodawkowatej:"),choices = list("Nie"=0,"Tak"=1),selected=0),
+             sliderInput("slider2", strong("Największa średnica elementu stałego (w mm):"),min = 0, max = 200, value = 0),
+             selectInput("select3",strong("Nieregularna wewnętrzna ściana torbieli:"),choices = list("Nie"=0,"Tak"=1),selected=0),
+             selectInput("select4",strong("Obecność cieni akustycznych:"),choices = list("Nie"=0,"Tak"=1),selected=0),
+             actionButton("update" ,"Oblicz"),
+             downloadButton("report", "Generuj raport"))
+           
+           
+    )%>% tagAppendAttributes(id = 'column-panel'),
+    column(9,
+           tags$div("Kalkulator wskaźnika ryzyka nowotworu jajnika (IOTA LR2)") %>% tagAppendAttributes(class="panel-title"),
+           wellPanel(
+             p("Aplikacja przeznaczona jest dla lekarzy ginekologów i wdraża wskaźnik złośliwości nowotworu jajnika w oparciu o algorytm IOTA LR2. Wizualizuje również wynik regresji logistycznej."),
+             p("Szczegółowy opis algorytmu znajduje się w artykule: Timmerman D, Testa AC, Bourne T, [i in.]. Model regresji logistycznej do rozróżniania łagodnych i złośliwych guzów przydatków przed operacją: wieloośrodkowe badanie przeprowadzone przez International Ovarian Tumor Analysis Group. J Clin Oncol. 2005, 23, 8794-8801."),
+             p("Ogólnie algorytm LR2 przewiduje, że nowotwór jest łagodny, gdy pacjent jest młody, lity składnik zmiany jest mały i występują cienie akustyczne. Możesz to sprawdzić empirycznie za pomocą różnych kombinacji wartości wejściowych."),
+             p("Wypełnij formularz i kliknij",strong("Oblicz")," "),
+             
+             htmlOutput("selected_var"),
+             htmlOutput("var"),
+             br(),
+             plotlyOutput("wykres")
+           )
+           )%>% tagAppendAttributes(id = 'column-content')
+  ) %>% tagAppendAttributes(id = 'row-content'),
+  fluidRow(
+    column(12,
+           tags$span("© Copyright Wszystkie prawa zastrzeżone."))%>% tagAppendAttributes(id = 'column-copyright'),
+    
+  )%>% tagAppendAttributes(id = 'row-footer')
+  
+  
+
 )
 }
 

app/www/style.css

@@ -247,12 +247,14 @@ padding-top:10px;
 
 .panel-title{
 display:flex;
-height:40px;
+padding:10px;
+min-height:40px;
 background-color:#028090;
 color:white;
 justify-content:center;
 align-items:center;
 font-family:Fjalla One;
+text-align:center;
 }
 
 #row-login{