From f1d86773778b3cca925fb82408bbde84af7f1eab Mon Sep 17 00:00:00 2001 From: Christian Klein Date: Wed, 4 May 2022 14:38:50 +0200 Subject: [PATCH] Some further style optimization --- out/css/pc.css | 239 +++++++++++++++++++++++------------------------- src/PC/View.elm | 38 +++++--- 2 files changed, 138 insertions(+), 139 deletions(-) diff --git a/out/css/pc.css b/out/css/pc.css index f519502..12b913e 100644 --- a/out/css/pc.css +++ b/out/css/pc.css @@ -540,7 +540,7 @@ th.address { } .pc .addressbus { - margin-bottom: 1em; + margin-bottom: 2em; background-color: var(--color-addressbus); color: var(--color-addressbus-text); @@ -554,46 +554,101 @@ th.address { } /* ARROWS */ -.pc .arrow { - position: absolute; - bottom: 0; - left: 50%; +.pc .arrow-line { + display: flex; + justify-content: space-around; + height: 0; + width: 100%; +} + +.pc .arrow { + width: 3rem; + height: 5rem; + + --transformation: translate(0, -2rem); + transform: var(--transformation); + -moz-transform: var(--transformation); + -webkit-transform: var(--transformation); + -o-transform: var(--transformation); + + color: var(--color-arrow-text); + background-color: var(--color-arrow); + + /* Arrow Label */ display: flex; justify-content: center; align-items: center; - width: 3rem; - height: 5rem; - - /* transform: rotate(90deg) translate(1.5rem, 2.5rem) ; */ - --transformation: translate(0, 3rem); - transform: var(--transformation); - -moz-transform: var(--transformation); - -webkit-transform: var(--transformation); - -o-transform: var(--transformation); - z-index: 100; - - font-size: 0.5em; - color: var(--color-arrow-text); - background-color: var(--color-arrow); } -.pc .arrow.down { - left: 25%; +.pc .arrow > :nth-child(1) { + /* Arrow Label Field */ + color: var(--color-arrow-text) !important; + background-color: var(--color-arrow) !important; + border-color: var(--color-arrow-text) !important; + + + padding: 2px 10px; + margin: 0; } -.pc .arrow.up { - left: 75%; - --transformation: rotate(180deg) translate(0, -4.5rem); - transform: var(--transformation); - -moz-transform: var(--transformation); - -webkit-transform: var(--transformation); - -o-transform: var(--transformation); +.pc .arrow * { + z-index: 1000; + + /* Arrow Label Text */ + color: var(--color-arrow-text) !important; + font-size: 1rem !important; + line-height: 1.1em !important; + font-weight: 600 !important; + text-transform: none !important; + white-space: normal !important; + height: min-content !important; } -.pc .arrow.up > :nth-child(1){ - /* transform: rotate(90deg) translate(0rem, 2rem); */ + +.pc .arrow :nth-child(2) { + /* Arrow Head */ + height: 0; + width: 0; + + border-left: 2.5rem solid transparent; + border-right: 2.5rem solid transparent; + border-top: 2rem solid transparent; + border-bottom: 2rem solid var(--color-arrow); + + position: absolute; + left: -1rem; + bottom: 5rem; +} + + +.pc .arrow-line.top { + position: absolute; + top: 0; +} + +.pc .arrow-line.bottom { + position: absolute; + bottom: 0; +} + + +.pc .arrow-line.top .arrow.up { + --transformation: translate(0, -2.5rem); +} +.pc .arrow-line.bottom .arrow.up { + --transformation: translate(0, -0.5rem); +} + + +.pc .arrow-line.top .arrow.down { + --transformation: translate(0, -4.5rem) rotate(180deg); +} +.pc .arrow-line.bottom .arrow.down { + --transformation: translate(0, -2.5rem) rotate(180deg); +} +.pc .arrow-line.top .arrow.down :nth-child(1) { --transformation: rotate(180deg); transform: var(--transformation); @@ -602,61 +657,13 @@ th.address { -o-transform: var(--transformation); } -.pc .arrow.up ~ .arrow.up { - left: 50%; -} - -.pc .arrow.up ~ .arrow.up ~ .arrow.up { - left: 25%; -} - -.pc .arrow.top { - bottom: auto; - top: -6rem; -} - - -.pc .arrow > :nth-child(1) { - font-size: 1.2em; - line-height: 1.1em; - font-weight: 600; - color: var(--color-arrow-text) !important; - background-color: var(--color-arrow) !important; - border-color: var(--color-arrow-text) !important; - text-transform: none; - padding: 2px 10px; - margin: 0; - /* transform: rotate(-90deg) translate(0rem, -2rem); */ - - white-space: normal; - height: min-content; - - z-index: 10; -} - -.pc .arrow > :nth-child(1) *{ - color: var(--color-arrow-text); - display: block; - white-space: break-spaces; -} - -.pc .arrow > :nth-child(1):hover, .pc .arrow > :nth-child(1) *:hover { - color: var(--color-arrow-text-hover); -} - -.pc .arrow > :nth-child(2) { - width: 0; - height: 0; - - border-left: 2.5rem solid transparent; - border-right: 2.5rem solid transparent; - border-top: 2rem solid var(--color-arrow); - border-bottom: 0rem solid transparent; - - position: absolute; - left: -1rem; - bottom: -2rem; - +.pc .arrow-line.bottom .arrow.down :nth-child(1) { + --transformation: rotate(180deg); + + transform: var(--transformation); + -moz-transform: var(--transformation); + -webkit-transform: var(--transformation); + -o-transform: var(--transformation); } @@ -751,7 +758,7 @@ th.address { .pc .grid-fullwidth.grid-databus { --width: 5rem; --text-height: 32rem; - --margin-side: 2rem; + --margin-side: 3rem; width: var(--width); box-sizing: border-box; @@ -828,53 +835,35 @@ th.address { width: 100%; } + .pc .arrow-line { + width: 0; + height: 100%; - .pc .arrow.down{ - left: inherit; + flex-direction: column; + } + + .pc .arrow-line.top { + left: 0; + } + + .pc .arrow-line.bottom { right: 0; - bottom: 25%; - --transformation: rotate(-90deg) translate(0, 1rem); - } - .pc .arrow.down > :nth-child(1) { - --transformation: rotate(90deg); - - transform: var(--transformation); - -moz-transform: var(--transformation); - -webkit-transform: var(--transformation); - -o-transform: var(--transformation); } - .pc .arrow.up{ - left: auto !important; - right: 0; - top: 25%; - --transformation: rotate(90deg) translate(0, -2.5rem); + .pc .arrow-line.top .arrow.up { + --transformation: rotate(-90deg) translate(0, -2.5rem); } - .pc .arrow.up > :nth-child(1) { - --transformation: rotate(-90deg); - } - - .pc .arrow.top { - right: auto !important; - left: -4.5rem !important; - top: 25%; - } - - /*.pc .arrow.up ~ .arrow.up { - - - } - - .pc .arrow.up ~ .arrow.up ~ .arrow.up { - - }*/ - - .pc .arrow.arrow2{ - top: 75%; + .pc .arrow-line.bottom .arrow.up { + --transformation: rotate(-90deg) translate(0, 0.75rem); } - + .pc .arrow-line.top .arrow.down { + --transformation: rotate(90deg) translate(0, 4.5rem); + } + .pc .arrow-line.bottom .arrow.down { + --transformation: rotate(90deg) translate(0, 0.1rem); + } .pc .alu { text-align: center; diff --git a/src/PC/View.elm b/src/PC/View.elm index 928105b..ebf92d6 100644 --- a/src/PC/View.elm +++ b/src/PC/View.elm @@ -37,7 +37,9 @@ viewRam : PC_Model -> Html PC_Msg viewRam model = div [ class "section", class "ram" ] [ h1 [ class "header" ] [ text "RAM" ] - , div [ class "arrow", class "down", class "top"] [ div [] [] , div [] [] ] + , div [ class "arrow-line", class "top" ] + [ div [ class "arrow", class "down"] [ div [] [] , div [] [] ] + ] , div [ class "scroller" ] [ Html.table [ class "" ] [ Html.thead [ class "head" ] @@ -50,8 +52,10 @@ viewRam model = , lazy viewRamContent model ] ] - , drawArrow Bottom Down UA_Ram2DataBus "Ram -> DataBus" - , drawArrow Bottom Up UA_DataBus2Ram "DataBus -> Ram" + , div [ class "arrow-line", class "bottom" ] + [ drawArrow Down UA_Ram2DataBus "Ram -> DataBus" + , drawArrow Up UA_DataBus2Ram "DataBus -> Ram" + ] ] @@ -129,8 +133,10 @@ viewCu model = ( instrRegInst, instrRegAddr ) = seperateInstructionsEntry model.pc.instructionReg in div [ class "section", class "cu" ] - [ drawArrow Top Up UA_CU_InstructionReg2AddressBus "InstR -> AddrB" - , drawArrow Top Up UA_CU_ProgrammCounter2AddressBus "ProgCounter -> AddrB" + [ div [ class "arrow-line", class "top" ] + [ drawArrow Up UA_CU_InstructionReg2AddressBus "InstR -> AddrB" + , drawArrow Up UA_CU_ProgrammCounter2AddressBus "ProgCounter -> AddrB" + ] , h1 [ class "header" ] [ text "Control Unit" ] , div [ class "action-area" ] [ -- Programm Counter @@ -175,7 +181,10 @@ viewCu model = , div [ class "scroller" ] [ viewCuUCode model ] - , drawArrow Bottom Up UA_DataBus2InstructionReg "DB -> InstR" + , div [ class "arrow-line", class "bottom" ] + [ drawArrow Up UA_DataBus2InstructionReg "DB -> InstR" + , drawArrow Down UA_CU_InstructionReg2DataBus "InstR -> DB" + ] ] @@ -284,8 +293,10 @@ viewAlu model = , button [ onClick <| PM_ManualStep UA_ALU_AccumulatorDivideByDataBus ] [ text "/" ] ] ] - , drawArrow Bottom Up UA_DataBus2Accumulator "DB -> ALU" - , drawArrow Bottom Down UA_ALU_Accumulator2DataBus "ALU -> DB" + , div [ class "arrow-line", class "bottom" ] + [ drawArrow Up UA_DataBus2Accumulator "DB -> ALU" + , drawArrow Down UA_ALU_Accumulator2DataBus "ALU -> DB" + ] ] -- ##################################################################### @@ -329,17 +340,16 @@ viewAddressBus model = -- Helpers -- ##################################################################### -type Arrow_Pos = Top | Bottom type Arrow_Dir = Up | Down -drawArrow : Arrow_Pos -> Arrow_Dir -> UAction -> String -> Html PC_Msg -drawArrow pos dir act str = +drawArrow : Arrow_Dir -> UAction -> String -> Html PC_Msg +drawArrow dir act str = div [ HAttr.classList [ ("arrow", True) - , ("top", pos == Top) - , ("up", dir == Up) - , ("down", dir == Down)] + , ("up", dir == Up) + , ("down", dir == Down) + ] ] [ div [ class "button" ] [ Html.a