diff --git a/src/CacheSim/View.elm b/src/CacheSim/View.elm index 9a41775..38847b6 100644 --- a/src/CacheSim/View.elm +++ b/src/CacheSim/View.elm @@ -123,7 +123,7 @@ viewCacheHierarchy ch = <| List.indexedMap viewCache ch in div [ class "cache-hierarchy" ] <| - [ h2 [] [ text <| "Cache hierarchy" ] + [ h2 [] [ text <| "Cache State" ] , levels ] @@ -154,7 +154,7 @@ viewAccessLog (aes, ap) = , resultSpan ae.result ] upEvent n ae = div [ class "event" ] - [ text <| "Updated L" ++ String.fromInt (n + 1) + [ text <| "Updated L" ++ String.fromInt (List.length aes - n) ] events = case ap of @@ -177,18 +177,27 @@ viewAccessInput m = Nothing -> optionalButton False "Access address" (Access -1) in div [ class "access-input" ] - [ labeledInput "Access address" m.accessInput ChangeAccessInput + [ h2 [] [ text "Run access simulation" ] + , div [ class "note" ] + [ text "Please make sure to click \"Use Hierarchy\" to load a hierarchy to simulate." + ] + , labeledInput "Access address" m.accessInput ChangeAccessInput , accessButton ] viewError : Bool -> String -> Html Msg -viewError hide e = span [ classList [ ("hidden", hide) ] ] [ text e ] +viewError hide e = div [ classList [ ("hidden", hide), ("error", True) ] ] [ text e ] viewBase : Model -> Html Msg viewBase m = let rawView = viewRawCacheModelHierarchy m.rawHierarchy - cacheView = Maybe.withDefault [] <| Maybe.map (List.singleton << viewCacheHierarchy) <| m.hierarchy + cacheView = + case m.accessView of + Nothing -> + Maybe.withDefault [] + <| Maybe.map (List.singleton << viewCacheHierarchy) <| m.hierarchy + Just _ -> [] accessView = Maybe.withDefault [] <| Maybe.map (List.singleton << viewAccessView m) <| m.accessView accessInputView = [ viewAccessInput m ] in diff --git a/static/scss/style.scss b/static/scss/style.scss index c1c1186..eb25e8a 100644 --- a/static/scss/style.scss +++ b/static/scss/style.scss @@ -1,5 +1,128 @@ @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); +$primary-color: lighten(#26c176, 30%); body { font-family: Raleway, serif; } + +h1, h2, h3, h4, h5, h6 { + margin-bottom: 5px; + margin-top: 5px; +} + +.hidden { + display: none; +} + +.input-group { + width: 100%; + display: flex; + align-items: center; + margin-bottom: 5px; + + span { + margin-right: 10px; + } + + input { + flex-grow: 1; + } +} + +input[type="text"] { + padding: 5px; + border-radius: 5px; + border: none; + background-color: #efefef; + + &:active, &:focus { + background-color: $primary-color; + transition: .25s; + } +} + +.error { + box-sizing: border-box; + padding: 5px; + border-radius: 5px; + margin-bottom: 10px; + border: 2px solid tomato; + color: tomato; +} + +.note { + box-sizing: border-box; + padding: 5px; + border-radius: 5px; + margin-bottom: 10px; +} + +span.success { + margin-left: 10px; + color: green; +} + +span.failure { + margin-left: 10px; + color: tomato; +} + +button, input[type="button"] { + box-sizing: border-box; + border: none; + margin-right: 5px; + margin-bottom: 5px; + display: inline-block; + padding: 5px; + border-radius: 5px; + font-size: 14px; + + &:hover, &:focus { + background-color: $primary-color; + transition: .25s; + + &:disabled { + background-color: lightgrey; + } + } + +} + +.cache-model-levels { + display: flex; + flex-wrap: wrap; +} + +.cache-model { + max-width: 600px; + padding: 10px; + border-radius: 5px; + border: 2px solid lightgrey; + margin: 5px; +} + +.cache, .cache-model { + padding: 10px; + border-radius: 5px; + border: 2px solid lightgrey; + margin: 5px; +} + +.cache-model-hierarchy, .cache-hierarchy, .access-input { + margin-bottom: 10px; +} + +table { + width: 100%; +} + +tr { + &:nth-child(1), &:nth-child(3) { + background-color: $primary-color; + } +} + +td { + text-align: center; + padding: 3px; +}