Commit 8ec4c3bd authored by Celia Rubio Madrigal's avatar Celia Rubio Madrigal

estilos

parent 00bedd3f
This diff is collapsed.
module Styles exposing (boldStyle, buttonStyle, cellStyle, fieldStyle, fileStyle, generalStyle, littlebuttonStyle, selectStyle, squarefieldStyle, tableStyle, textStyle,navbar)
module Styles exposing (..)
import Html exposing (Html,Attribute)
import Html.Attributes exposing (style)
import Html exposing (..)
import Html.Attributes exposing (style,href,placeholder)
import Html.Events exposing (onInput,onClick)
back : String
back = "#F9F9FF"
......@@ -50,12 +51,17 @@ boldStyle =
, style "font-family" "calibri"
, style "background-color" bold
, style "box-shadow" "5px 7.5px"
]
-- ++ noSelect
--, style "-webkit-user-select" "none"
--, style "-khtml-user-select" "none"
--, style "-moz-user-select" "none"
--, style "-o-user-select" "none"
--, style "user-select" "none"
noSelect : List (Attribute msg)
noSelect =
[ style "-webkit-user-select" "none"
, style "-khtml-user-select" "none"
, style "-moz-user-select" "none"
, style "-o-user-select" "none"
, style "user-select" "none"
]
......@@ -64,50 +70,43 @@ tableStyle =
[ style "text-align" "center"
, style "border-collapse" "collapse"
, style "table-layout" "fixed"
, style "margin-left" "auto"
, style "margin-right" "auto"
, style "margin-top" "50px"
, style "margin-bottom" "20px"
, style "margin" "20px 0px"
]
++ centered
selectStyle : List (Attribute msg)
selectStyle =
[ style "font-family" "calibri"
, style "font-size" "20px"
, style "width" "208px"
, style "padding" "3.5px 10px"
, style "appearance" "none"
, style "-moz-appearance" "none"
, style "-webkit-appearance" "none"
, style "background-image" "urlstyle http://i62.tinypic.com/15xvbd5.png"
, style "background-repeat" "no-repeat"
, style "background-position" "93%"
, style "border" "1px solid #88888"
, style "border-radius" "20px 20px 20px 20px"
, style "color" "black"
, style "overflow" "hidden"
, style "-moz-border-radius" "20px 20px 20px 20px"
, style "-webkit-border-radius" "20px 2top0px 20px 20px"
, style "outline" "none"
]
centered : List (Attribute msg)
centered =
[ style "margin-left" "auto"
, style "margin-right" "auto"
]
-- selectStyle : List (Attribute msg)
-- selectStyle =
-- [ style "width" "208px"
-- , style "outline" "none"
-- , style "background-image" "urlstyle http://i62.tinypic.com/15xvbd5.png"
-- ]
-- ++ weird
-- ++ ( textStyle "20px" )
buttonStyle : String -> List (Attribute msg)
buttonStyle s =
[ style "font-family" "calibri"
, style "font-size" "20px"
, style "width" s
]
[ style "width" s ]
++ ( textStyle "20px" )
fileStyle : List (Attribute msg)
fileStyle =
[ style "font-family" "calibri"
, style "font-size" "20px"
, style "margin-left" "auto"
, style "margin-right" "auto"
, style "padding" "3.5px 10px"
weird
++ ( textStyle "20px" )
++ centered
weird : List (Attribute msg)
weird =
[ style "padding" "3.5px 10px"
, style "appearance" "none"
, style "-moz-appearance" "none"
, style "-webkit-appearance" "none"
......@@ -124,47 +123,104 @@ fileStyle =
littlebuttonStyle : List (Attribute msg)
littlebuttonStyle =
[ style "font-family" "calibri"
, style "font-size" "20px"
, style "width" "50px"
, style "padding" "3.5px 10px"
, style "appearance" "none"
, style "-moz-appearance" "none"
, style "-webkit-appearance" "none"
, style "background-repeat" "no-repeat"
, style "background-position" "95%"
, style "border" "1px solid #88888"
, style "border-radius" "20px 20px 20px 20px"
, style "color" "black"
, style "overflow" "hidden"
, style "-moz-border-radius" "20px 20px 20px 20px"
, style "-webkit-border-radius" "20px 20px 20px 20px"
, style "font-family" "calibri"
]
[ style "width" "50px" ]
++ weird
++ ( textStyle "20px" )
fieldStyle : List (Attribute msg)
fieldStyle =
[ style "width" "650px"
, style "text-align" "center"
, style "font-family" "calibri"
, style "font-size" "30px"
, style "border-radius" "20px 20px 20px 20px"
]
++ ( textStyle "30px" )
squarefieldStyle : String -> List (Attribute msg)
squarefieldStyle s =
[ style "width" s
, style "text-align" "center"
, style "font-family" "calibri"
, style "font-size" "20px"
, style "padding" "3.5px 2px"
]
++ ( textStyle "20px" )
doblecolumna : String -> List (Html msg) -> List (Html msg) -> Html msg
doblecolumna s a b =
let tamancho = "400px"
in
div [ style "padding"
(s
++ "px 0px "
++ (s |> String.toInt |> Maybe.withDefault 0 |> (*) 2 |> String.fromInt)
++ "px 0px"
)
]
[ div [ style "float" "left", style "width" "50%" ]
[ div [ style "float" "right", style "width" tamancho ]
a
]
, div [ style "float" "right", style "width" "50%" ]
[ div [ style "float" "left", style "width" tamancho ]
b
]
]
titulo : String -> Html msg
titulo s =
h1
( textStyle "2em" )
[ text s ]
originalrow : List Int -> Html msg
originalrow r =
div [ style "overflow" "auto" ]
[ table
tableStyle
[ tr
[ style "box-shadow" "5px 8px" ]
( List.map
((\a -> modBy (List.length r) a)
>> String.fromInt
>> (\x -> td boldStyle [ text x ]))
r
)
]
]
entrada : Attribute msg -> Html msg
entrada inp =
input
( fieldStyle
++ [ style "margin-top" "50px"
, style "margin-bottom" "50px"
, placeholder "4 5 7 1 6 3 8 2 11 0 9 10"
, inp
])
[]
bloquealeatorio : Attribute msg -> Attribute msg -> Html msg
bloquealeatorio longitud aleatorio =
div
[]
[ span
(textStyle "20px")
[ text "Serie aleatoria de longitud " ]
, input
( squarefieldStyle "1em"
++ [ placeholder "12"
, longitud
])
[]
, button ( littlebuttonStyle ++ [ aleatorio ])
[ text "OK" ]
]
aStyle : Bool -> String -> List (Attribute msg)
aStyle this ref =
[ Html.Attributes.href (if this then "" else ref)
[ href (if this then "" else ref)
, style "background-color" (if this then bold else suave)
, style "color" "black"
, style "text-decoration" "none"
......@@ -176,25 +232,28 @@ aStyle this ref =
, style "border-color" back
]
++
textStyle "1em"
textStyle "1.25em"
navbar : Int -> Html msg
navbar this =
let (one,two,three) =
(this==1,this==2,this==3)
in
Html.nav
div []
[ nav
[ style "position" "fixed"
, style "top" "0"
, style "width" "100%"
--, style "padding" "10px"
, style "background-color" back
]
[ Html.a (aStyle one "https://matrices.netlify.com/")
[ Html.text "Matrices"]
, Html.a (aStyle two "https://diagramas.netlify.com/")
[ Html.text "Diagramas"]
, Html.a (aStyle three "https://modificaciones.netlify.com/")
[ Html.text "Modificaciones"]
, Html.div [style "min-width" "15px",style "display" "inline-block"] [Html.text " "]
[ a (aStyle one "https://matrices.netlify.com/")
[ text "Matrices"]
, a (aStyle two "https://diagramas.netlify.com/")
[ text "Diagramas"]
, a (aStyle three "https://modificaciones.netlify.com/")
[ text "Modificaciones"]
, div [style "min-width" "15px",style "display" "inline-block"] [text " "]
]
, br [] []
, br [] []
]
......@@ -10,44 +10,13 @@ import Styles exposing (..)
import Types exposing (..)
doblecolumna : String -> List (Html Msg) -> List (Html Msg) -> Html Msg
doblecolumna s a b =
div
[ style "padding"
(s
++ "px 0px "
++ (String.fromInt <| (\x -> 3 * x) <| Maybe.withDefault 0 <| String.toInt s)
++ "px 0px"
)
]
[ div [ style "float" "left", style "width" "50%" ]
[ div [ style "float" "right", style "width" "400px" ]
a
]
, div [ style "float" "right", style "width" "50%" ]
[ div [ style "float" "left", style "width" "400px" ]
b
]
]
header : Html Msg
header =
h1
( textStyle "2em" )
[ text "MATRIZ DODECAFÓNICA" ]
selectors : Html Msg
selectors =
opciones : Html Msg
opciones =
doblecolumna "60"
[ a
( textStyle "30px"
++ [ style "color" "#5757FF"
])
( textStyle "30px" )
[ text "Numeración" ]
, br [] []
, br [] []
, label
( textStyle "20px" )
[ input
......@@ -60,7 +29,6 @@ selectors =
, text " Tradicional"
]
, br [] []
, br [] []
, label
( textStyle "20px" )
[ input
......@@ -73,12 +41,9 @@ selectors =
]
]
[ a
( textStyle "30px"
++ [ style "color" "#5757FF"
])
( textStyle "30px" )
[ text "Sintaxis" ]
, br [] []
, br [] []
, label
( textStyle "20px" )
[ input
......@@ -91,7 +56,6 @@ selectors =
, text " Simple"
]
, br [] []
, br [] []
, label
( textStyle "20px" )
[ input
......@@ -105,67 +69,19 @@ selectors =
]
originalrow : List Int -> Html Msg
originalrow r =
div [ style "overflow" "auto" ]
[ table
tableStyle
[ tr
[ style "box-shadow" "5px 8px" ]
(List.map
((\a -> (\dividend modulus -> modBy modulus dividend) a (List.length r))
>> String.fromInt
>> (\x -> td boldStyle [ text x ])
)
r
)
]
]
entrada : Html Msg
entrada =
input
( fieldStyle
++ [ style "margin-top" "80px"
, style "margin-bottom" "50px"
, placeholder "4 5 7 1 6 3 8 2 11 0 9 10"
, onInput Introducir
])
[]
bloquealeatorio : Html Msg
bloquealeatorio =
div
[ style "margin-top" "50px", style "margin-bottom" "50px" ]
[ span
( textStyle "20px" )
[ text "Serie aleatoria de longitud " ]
, input
( squarefieldStyle "20px"
++ [ placeholder "12"
, onInput KeepLong
])
[]
, button (littlebuttonStyle ++ [ onClick Aleatorio ])
[ text "OK" ]
]
view : Model -> Browser.Document Msg
view model =
(Browser.Document "Matrices"
[ div generalStyle
[ navbar 1
, titulo "MATRIZ DODECAFÓNICA"
, tablear model
, opciones
, br [] []
, bloquealeatorio (onInput KeepLong) (onClick Aleatorio)
, br [] []
, header
, tablear model
, selectors
, originalrow model.serie
, entrada
, bloquealeatorio
, entrada (onInput Introducir)
, informacion
]
]
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment