Update the visuals a litte

This commit is contained in:
Danila Fedorin 2019-05-28 23:44:53 -07:00
parent 9aec4053f0
commit 5710f10999
2 changed files with 137 additions and 5 deletions

View File

@ -123,7 +123,7 @@ viewCacheHierarchy ch =
<| List.indexedMap viewCache ch <| List.indexedMap viewCache ch
in in
div [ class "cache-hierarchy" ] <| div [ class "cache-hierarchy" ] <|
[ h2 [] [ text <| "Cache hierarchy" ] [ h2 [] [ text <| "Cache State" ]
, levels , levels
] ]
@ -154,7 +154,7 @@ viewAccessLog (aes, ap) =
, resultSpan ae.result , resultSpan ae.result
] ]
upEvent n ae = div [ class "event" ] upEvent n ae = div [ class "event" ]
[ text <| "Updated L" ++ String.fromInt (n + 1) [ text <| "Updated L" ++ String.fromInt (List.length aes - n)
] ]
events = events =
case ap of case ap of
@ -177,18 +177,27 @@ viewAccessInput m =
Nothing -> optionalButton False "Access address" (Access -1) Nothing -> optionalButton False "Access address" (Access -1)
in in
div [ class "access-input" ] 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 , accessButton
] ]
viewError : Bool -> String -> Html Msg 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 : Model -> Html Msg
viewBase m = viewBase m =
let let
rawView = viewRawCacheModelHierarchy m.rawHierarchy 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 accessView = Maybe.withDefault [] <| Maybe.map (List.singleton << viewAccessView m) <| m.accessView
accessInputView = [ viewAccessInput m ] accessInputView = [ viewAccessInput m ]
in in

View File

@ -1,5 +1,128 @@
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
$primary-color: lighten(#26c176, 30%);
body { body {
font-family: Raleway, serif; 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;
}