Did some visual cleaning up
This commit is contained in:
parent
66cb839f87
commit
231357624f
@ -269,11 +269,20 @@ th.address {
|
||||
}
|
||||
|
||||
.pc input[type=number].instruction {
|
||||
width: 4em !important;
|
||||
width: 4.5em !important;
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.pc input[type=number].address {
|
||||
width: 5em !important;
|
||||
width: 6em !important;
|
||||
}
|
||||
|
||||
.pc .cu input[type=number].address {
|
||||
width: 100% !important;
|
||||
align-self: end;
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -385,6 +394,13 @@ th.address {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pc .cu .action-area {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content 0.5fr;
|
||||
grid-row-gap: 0.5em;
|
||||
grid-column-gap: 0.5em;
|
||||
}
|
||||
|
||||
.pc .cu .input-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -403,7 +419,7 @@ th.address {
|
||||
}
|
||||
|
||||
.pc .cu input[type=number] {
|
||||
width: 9.5em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pc .cu label {
|
||||
@ -443,6 +459,7 @@ th.address {
|
||||
color: var(--color-cu-text);
|
||||
border-color: var(--color-cu-text);
|
||||
background-color: transparent;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.pc .modal .download-button {
|
||||
@ -471,6 +488,10 @@ th.address {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pc .alu input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pc .alu button {
|
||||
margin-right: 1em;
|
||||
}
|
||||
@ -479,6 +500,16 @@ th.address {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.pc .alu .button-group-alu__2-elements {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.pc .alu .button-group-alu__4-elements {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
/* BUSSES */
|
||||
|
||||
.pc .databus,
|
||||
@ -754,7 +785,7 @@ th.address {
|
||||
.pc .grid-fullwidth.grid-addressbus > *,
|
||||
.pc .grid-fullwidth.grid-databus > * {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
top: 6em;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
@ -794,6 +825,7 @@ th.address {
|
||||
margin: -1rem;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--color-controls-button-border);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
149
src/PC/View.elm
149
src/PC/View.elm
@ -129,80 +129,52 @@ viewCu model =
|
||||
( instrRegInst, instrRegAddr ) = seperateInstructionsEntry model.pc.instructionReg
|
||||
in
|
||||
div [ class "section", class "cu" ]
|
||||
[ drawArrow Top Up UA_InstructionReg2AddressBus "InstR -> AddrB"
|
||||
, drawArrow Top Up UA_ProgrammCounter2AddressBus "ProgCounter -> AddrB"
|
||||
--, div [ class "arrow", class "up", class "top"]
|
||||
-- [ div [ class "button" ]
|
||||
-- [ Html.a [ onClick (PM_ManualStep ActInstructionReg2AddressBus)] [ text "InstR -> AddrB" ]]
|
||||
-- , div [] []
|
||||
-- ]
|
||||
--, div [ class "arrow", class "up", class "top", class "arrow2"]
|
||||
-- [ div [ class "button" ]
|
||||
-- [ Html.a [ onClick (PM_ManualStep ActProgrammCounter2AddressBus)] [ text "ProgCounter -> AddrB" ]]
|
||||
-- , div [] []
|
||||
-- ]
|
||||
|
||||
|
||||
[ drawArrow Top Up UA_CU_InstructionReg2AddressBus "InstR -> AddrB"
|
||||
, drawArrow Top Up UA_CU_ProgrammCounter2AddressBus "ProgCounter -> AddrB"
|
||||
, h1 [ class "header" ] [ text "Control Unit" ]
|
||||
, p []
|
||||
[ div [class "input-row"]
|
||||
[ Html.label [ HAttr.for "cu-progcounter" ] [ text "Programm Counter:" ]
|
||||
, div [ class "input-group" ]
|
||||
[ button
|
||||
[ onClick <| PM_ManualStep UA_InstructionReg2ProgrammCounter ]
|
||||
[ text "InstRA -> " ]
|
||||
, Html.input
|
||||
[ HAttr.type_ "number"
|
||||
, HAttr.id "cu-progcounter"
|
||||
, value (addLeadingZero model.pc.programmCounter 3)
|
||||
, onInput PM_F_CuProgCounterEdit
|
||||
] []
|
||||
]
|
||||
]
|
||||
|
||||
, div [class "input-row"]
|
||||
[ Html.label [ HAttr.for "cu-instrReg" ] [ text "Instruction Register:" ]
|
||||
, div []
|
||||
[ Html.input
|
||||
[ HAttr.type_ "number"
|
||||
, HAttr.id "cu-instrReg"
|
||||
, class "instruction"
|
||||
, value (addLeadingZero instrRegInst 3)
|
||||
, onInput PM_F_CuInstrRegEditInstr
|
||||
] []
|
||||
, Html.input
|
||||
[ HAttr.type_ "number"
|
||||
, HAttr.id "cu-instrReg"
|
||||
, class "address"
|
||||
, value (addLeadingZero instrRegAddr 5)
|
||||
, onInput PM_F_CuInstrRegEditAddr
|
||||
] []
|
||||
]
|
||||
]
|
||||
|
||||
, div [class "input-row"]
|
||||
[ Html.label [ HAttr.for "cu-uCounter" ] [ text "µCode Counter:" ]
|
||||
, div [ class "input-group" ]
|
||||
[ button
|
||||
[ onClick <| PM_ManualStep UA_InstructionReg2UCounter ]
|
||||
[ text "IntrRI ->" ]
|
||||
, Html.input
|
||||
[ HAttr.type_ "number"
|
||||
, HAttr.id "cu-uCounter"
|
||||
, value (addLeadingZero model.pc.uCounter 4)
|
||||
, onInput PM_F_CuUCounterEdit
|
||||
] []
|
||||
]
|
||||
]
|
||||
, div [ class "action-area" ]
|
||||
[ -- Programm Counter
|
||||
Html.label [ HAttr.for "cu-progcounter" ] [ text "Programm Counter:" ]
|
||||
, button
|
||||
[ onClick <| PM_ManualStep UA_CU_InstructionReg2ProgrammCounter ]
|
||||
[ text "InstRA -> " ]
|
||||
, Html.input
|
||||
[ HAttr.type_ "number"
|
||||
, HAttr.id "cu-progcounter"
|
||||
, value (addLeadingZero model.pc.programmCounter 3)
|
||||
, onInput PM_F_CuProgCounterEdit
|
||||
] []
|
||||
-- IR
|
||||
, Html.label [HAttr.for "cu-instrReg" ] [ text "Instruction Register:" ]
|
||||
, Html.input
|
||||
[ HAttr.type_ "number"
|
||||
, HAttr.id "cu-instrReg"
|
||||
, class "instruction"
|
||||
, value (addLeadingZero instrRegInst 3)
|
||||
, onInput PM_F_CuInstrRegEditInstr
|
||||
] []
|
||||
, Html.input
|
||||
[ HAttr.type_ "number"
|
||||
, HAttr.id "cu-instrReg"
|
||||
, class "address"
|
||||
, value (addLeadingZero instrRegAddr 5)
|
||||
, onInput PM_F_CuInstrRegEditAddr
|
||||
] []
|
||||
-- µCounter
|
||||
, Html.label [ HAttr.for "cu-uCounter" ] [ text "µCode Counter:" ]
|
||||
, button
|
||||
[ onClick <| PM_ManualStep UA_CU_InstructionReg2UCounter ]
|
||||
[ text "IntrRI ->" ]
|
||||
, Html.input
|
||||
[ HAttr.type_ "number"
|
||||
, HAttr.id "cu-uCounter"
|
||||
, value (addLeadingZero model.pc.uCounter 4)
|
||||
, onInput PM_F_CuUCounterEdit
|
||||
] []
|
||||
]
|
||||
, div [ class "scroller" ]
|
||||
[ viewCuUCode model
|
||||
]
|
||||
--, div [ class "arrow", class "up"]
|
||||
-- [ div [ class "button" ]
|
||||
-- [ Html.a [ onClick (MsgManualStep ActDataBus2InstructionReg) ] [ text "DB -> InstR" ]]
|
||||
-- , div [] []
|
||||
-- ]
|
||||
, drawArrow Bottom Up UA_DataBus2InstructionReg "DB -> InstR"
|
||||
]
|
||||
|
||||
@ -282,7 +254,7 @@ viewAlu : PC_Model -> Html PC_Msg
|
||||
viewAlu model =
|
||||
div [ class "section", class "alu" ]
|
||||
[ h1 [ class "header" ] [ text "ALU" ]
|
||||
, p []
|
||||
, p []
|
||||
[ Html.label [ HAttr.for "alu-accumulator" ] [ text "Accumulator:" ]
|
||||
, Html.input
|
||||
[ HAttr.type_ "number"
|
||||
@ -291,22 +263,29 @@ viewAlu model =
|
||||
, onInput PM_F_AluEdit
|
||||
] []
|
||||
]
|
||||
, p []
|
||||
[ button [ onClick <| PM_ManualStep UA_AccumulatorIncrement ] [ text "Acc ++" ]
|
||||
, button [ onClick <| PM_ManualStep UA_AccumulatorDecrement ] [ text "Acc --" ]
|
||||
, div []
|
||||
[ Html.span [] [ text "General µActions" ]
|
||||
, Html.br [] []
|
||||
, div [ class "button-group-alu__2-elements" ]
|
||||
[ button [ onClick <| PM_ManualStep UA_ALU_AccumulatorIncrement ] [ text "Acc ++" ]
|
||||
, button [ onClick <| PM_ManualStep UA_ALU_AccumulatorDecrement ] [ text "Acc --" ]
|
||||
]
|
||||
]
|
||||
, drawArrow Bottom Up UA_DataBus2Accumulator "DB -> ALU"
|
||||
, drawArrow Bottom Down UA_Accumulator2DataBus "ALU -> DB"
|
||||
--, div [ class "arrow", class "up"]
|
||||
-- [ div [ class "button" ]
|
||||
-- [ Html.a [ onClick (MsgManualStep ActDataBus2Accumulator)] [ text "DB -> ALU" ]]
|
||||
-- , div [] []
|
||||
-- ]
|
||||
--, div [ class "arrow", class "down"]
|
||||
-- [ div [ class "button" ]
|
||||
-- [ Html.a [ onClick (MsgManualStep ActAccumulator2DataBus)] [ text "ALU -> DB" ]]
|
||||
-- , div [] []
|
||||
-- ]
|
||||
, div []
|
||||
[ Html.span [] [ text "µActions from DataBus" ]
|
||||
, div [ class "button-group-alu__2-elements" ]
|
||||
[ button [ onClick <| PM_ManualStep UA_ALU_AccumulatorShiftLeftByDataBus ] [ text "LeftShift"]
|
||||
, button [ onClick <| PM_ManualStep UA_ALU_AccumulatorShiftRightByDataBus ] [ text "RightShift" ]
|
||||
]
|
||||
, div [ class "button-group-alu__4-elements" ]
|
||||
[ button [ onClick <| PM_ManualStep UA_ALU_AccumulatorAddByDataBus ] [ text "+" ]
|
||||
, button [ onClick <| PM_ManualStep UA_ALU_AccumulatorSubtractByDataBus ] [ text "-" ]
|
||||
, button [ onClick <| PM_ManualStep UA_ALU_AccumulatorMultiplyByDataBus ] [ text "*" ]
|
||||
, button [ onClick <| PM_ManualStep UA_ALU_AccumulatorDivideByDataBus ] [ text "/" ]
|
||||
]
|
||||
]
|
||||
, drawArrow Bottom Up UA_DataBus2Accumulator "DB -> ALU"
|
||||
, drawArrow Bottom Down UA_ALU_Accumulator2DataBus "ALU -> DB"
|
||||
]
|
||||
|
||||
-- #####################################################################
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user