Skip to content

Commit 26aaebd

Browse files
igbanamigbanam
authored
feat: Dr. Rai Sidebar Component (#5619)
**Story card:** [sc-15819](https://app.shortcut.com/simpledotorg/story/15819/create-the-dr-rai-frontend-sidebar-component?vc_group_by=day&ct_workflow=all&cf_workflow=500000031) ## Because The sidebar is where all the actions happen. ## This addresses Building out the UI for the sidebar with its interactivity, but without the data to complete a full flow. ## Test instructions suite tests
1 parent ba1ee21 commit 26aaebd

File tree

4 files changed

+529
-30
lines changed

4 files changed

+529
-30
lines changed

‎app/assets/stylesheets/application.scss‎

Lines changed: 341 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1058,3 +1058,344 @@ span.inactive {
10581058
color: #0156b2;
10591059
}
10601060
}
1061+
1062+
.sidepanel {
1063+
display: flex;
1064+
position: fixed;
1065+
// top: 0;
1066+
// left: 100px;
1067+
width: 550px;
1068+
// height: 100%;
1069+
background: white;
1070+
z-index: 1000;
1071+
flex-direction: column;
1072+
font-family: "Roboto", sans-serif;
1073+
font-size: 16px;
1074+
box-shadow: -8px 0 0 0 rgba(0, 0, 0, 0.08), -4px 0 8px rgba(0, 0, 0, 0.05);
1075+
overflow-y: scroll;
1076+
}
1077+
1078+
@scope (.sidepanel) {
1079+
.header {
1080+
background-color: white;
1081+
display: flex;
1082+
flex-direction: row;
1083+
justify-content: space-between;
1084+
align-items: center;
1085+
padding: 12px 20px;
1086+
font-size: 18px;
1087+
font-weight: bold;
1088+
position: sticky;
1089+
top: 0;
1090+
z-index: 10;
1091+
1092+
p {
1093+
font-weight: semi-bold;
1094+
margin: 0 !important;
1095+
font-size: 18px;
1096+
}
1097+
1098+
button {
1099+
width: 28px;
1100+
height: 28px;
1101+
aspect-ratio: 1;
1102+
display: flex;
1103+
justify-content: center;
1104+
align-items: center;
1105+
border-radius: 6px;
1106+
transition: 200ms ease-out;
1107+
font-size: medium;
1108+
&:hover {
1109+
background-color: #00000012;
1110+
background-color: (0 0 0 / 0.08);
1111+
}
1112+
}
1113+
}
1114+
1115+
h1 {
1116+
margin: 0;
1117+
padding: 0;
1118+
font-size: 18px;
1119+
}
1120+
1121+
h2 {
1122+
margin: 0;
1123+
padding: 0;
1124+
font-size: 18px;
1125+
font-weight: 600 !important;
1126+
font-family: $font-condensed;
1127+
}
1128+
1129+
h4 {
1130+
color: grey;
1131+
text-transform: none;
1132+
letter-spacing: 0;
1133+
}
1134+
1135+
1136+
p {
1137+
margin-bottom: 0;
1138+
}
1139+
1140+
.content {
1141+
padding: 20px;
1142+
display: flex;
1143+
flex-direction: column;
1144+
gap: 20px;
1145+
}
1146+
1147+
.step-block {
1148+
background-color: #eff8ff;
1149+
border: 1px solid #d5e6ff !important;
1150+
padding-top: 1rem;
1151+
padding-bottom: 1rem;
1152+
padding-left: 20px;
1153+
padding-right: 20px;
1154+
border-radius: 0.375rem;
1155+
position: relative;
1156+
}
1157+
1158+
.link-button {
1159+
background-color: transparent;
1160+
border: none;
1161+
color: #007eff;
1162+
cursor: pointer;
1163+
font-size: 16px;
1164+
padding: 6px 0px;
1165+
text-align: left;
1166+
1167+
&:hover {
1168+
text-decoration: underline;
1169+
text-underline-offset: 3px;
1170+
}
1171+
}
1172+
1173+
.edit {
1174+
position: absolute;
1175+
top: 8px;
1176+
right: 8px;
1177+
padding: 6px 12px;
1178+
}
1179+
1180+
ul {
1181+
margin: 6px 0 0;
1182+
padding-inline-start: 5px;
1183+
list-style-type: none;
1184+
}
1185+
1186+
.highlight {
1187+
// background-color: #fde047;
1188+
font-weight: bold;
1189+
padding: 0 2px;
1190+
margin: 0 -2px;
1191+
}
1192+
1193+
.activity-statement {
1194+
margin: 16px 0 0;
1195+
font-size: 17px;
1196+
display: block;
1197+
font-family: $font-condensed;
1198+
color: grey;
1199+
span {
1200+
font-weight: 800;
1201+
}
1202+
}
1203+
1204+
.goal-input-block {
1205+
display: flex;
1206+
border: 1px solid #cad0d7;
1207+
background: #fff;
1208+
border-radius: 0.375rem;
1209+
width: 7em; // 28 * 0.25rem = 7rem
1210+
margin: 16px 0 8px;
1211+
padding: 2px;
1212+
1213+
input {
1214+
display: block;
1215+
text-align: right;
1216+
padding: 0.125rem;
1217+
padding-left: 0.5rem;
1218+
padding-right: 0.5rem;
1219+
padding-top: 0.25rem;
1220+
padding-bottom: 0.25rem;
1221+
font-size: 1rem;
1222+
width: 100%;
1223+
font-weight: 400;
1224+
margin-bottom: 2px;
1225+
border: 0;
1226+
}
1227+
input::placeholder {
1228+
font-weight: 400;
1229+
}
1230+
1231+
// input.patient {
1232+
// width: 100%;
1233+
// }
1234+
1235+
span {
1236+
background-color: #f0f0f0;
1237+
color: rgba(0, 0, 0, 0.5);
1238+
display: flex;
1239+
align-items: center;
1240+
justify-content: center;
1241+
border-radius: 4px;
1242+
flex: none;
1243+
padding: 0 12px;
1244+
font-weight: 400;
1245+
}
1246+
}
1247+
1248+
.goal-input-block.patients {
1249+
width: 11rem;
1250+
}
1251+
1252+
.next-button {
1253+
background-color: #c4e2ff;
1254+
padding: 0.5rem;
1255+
width: 100%;
1256+
border: none;
1257+
text-align: center;
1258+
font-size: 1rem;
1259+
color: #007eff;
1260+
border-radius: 0.375rem;
1261+
margin-top: 1rem;
1262+
1263+
&:hover {
1264+
background-color: #b2d9ff;
1265+
}
1266+
}
1267+
1268+
textarea {
1269+
margin: 16px 0 8px;
1270+
padding: 1rem;
1271+
font-size: 1rem;
1272+
background-color: #fff;
1273+
border: 1px solid #cad0d7;
1274+
border-radius: 0.375rem;
1275+
width: 100%;
1276+
min-height: 8rem;
1277+
}
1278+
1279+
.common-actions-list {
1280+
list-style-type: disc;
1281+
padding-left: 1.5em;
1282+
color: #007eff;
1283+
1284+
.clicked {
1285+
color: rgba(0, 0, 0, 0.6);
1286+
}
1287+
}
1288+
1289+
.action-buttons-block {
1290+
display: flex;
1291+
justify-content: flex-end;
1292+
gap: 36px;
1293+
1294+
button {
1295+
border: none;
1296+
}
1297+
1298+
.save-button {
1299+
background-color: #0275eb;
1300+
font-family: $font-condensed;
1301+
color: #fff;
1302+
padding: 0.625rem;
1303+
width: 100%;
1304+
border-radius: 0.375rem;
1305+
grid-column: span 3;
1306+
transition: background-color 200ms ease-out;
1307+
flex-grow: 1;
1308+
display: flex;
1309+
justify-content: center;
1310+
align-items: center;
1311+
gap: 12px;
1312+
1313+
&:hover {
1314+
background-color: #025bbf;
1315+
}
1316+
}
1317+
1318+
// Cancel button styles
1319+
.cancel-button {
1320+
text-align: left;
1321+
font-family: $font-condensed;
1322+
padding: 0.625rem;
1323+
border-radius: 0.375rem;
1324+
display: inline;
1325+
color: #6b7280; // Tailwind's gray-500
1326+
cursor: pointer;
1327+
width: auto;
1328+
min-width: 0;
1329+
flex-shrink: 0;
1330+
}
1331+
1332+
.loading-animation {
1333+
display: flex;
1334+
align-items: center;
1335+
justify-content: center;
1336+
gap: 8px;
1337+
}
1338+
1339+
.dot {
1340+
width: 6px;
1341+
height: 6px;
1342+
border-radius: 50%;
1343+
background: #fff;
1344+
animation: pulse 1.2s infinite ease-in-out;
1345+
}
1346+
1347+
.dot:nth-child(2) {
1348+
animation-delay: 0.2s;
1349+
}
1350+
1351+
.dot:nth-child(3) {
1352+
animation-delay: 0.4s;
1353+
}
1354+
1355+
@keyframes pulse {
1356+
0%,
1357+
80%,
1358+
100% {
1359+
transform: scale(1);
1360+
opacity: 0.6;
1361+
}
1362+
40% {
1363+
transform: scale(1.6);
1364+
opacity: 1;
1365+
}
1366+
}
1367+
}
1368+
}
1369+
1370+
.bs-canvas-overlay {
1371+
opacity: 0;
1372+
z-index: -1;
1373+
}
1374+
1375+
.bs-canvas-overlay.show {
1376+
opacity: 0.85;
1377+
z-index: 1100;
1378+
}
1379+
1380+
.bs-canvas {
1381+
top: 0;
1382+
width: 0;
1383+
z-index: 1110;
1384+
overflow-x: hidden;
1385+
overflow-y: auto;
1386+
}
1387+
1388+
.bs-canvas-left {
1389+
left: 0;
1390+
}
1391+
1392+
.bs-canvas-right {
1393+
right: 0;
1394+
}
1395+
1396+
.bs-canvas-anim {
1397+
transition: all .4s ease-out;
1398+
-webkit-transition: all .4s ease-out;
1399+
-moz-transition: all .4s ease-out;
1400+
-ms-transition: all .4s ease-out;
1401+
}

0 commit comments

Comments
 (0)