Skip to content

Commit 3c08b3d

Browse files
chidozieononiwuchidozieononiwu
authored
Redesign Revision Select (#7687)
* Refactor Review Badge * Refactor Review Page UI * Adjust APIRevisions Page * APIRevisions Search and Filter * Updated to Revisions Context Blade * Add APIRevision Functioning * Add RequestVerificationToken for APIRevisionDelete * Refinde APIRevision Context * Refine APIRevision Context * Improvements to Revisions Page * Update to APIREvisions Page * Update to Samples Page * Rename and Delete Samples * Add conversiation info badge
1 parent 77b8524 commit 3c08b3d

48 files changed

Lines changed: 1932 additions & 1431 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/dotnet/APIView/APIViewWeb/Client/css/pages/conversation.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
@import "../shared/mixins.scss";
22

33
#conversation-main-container {
4-
@include fixed-page-heights;
5-
color: var(--base-text-color);
6-
padding-right: 0px;
7-
padding-left: 0px;
4+
@include main-content-container;
85
}
96

107
.conversiation-center {
118
overflow: auto;
129
color: var(--base-text-color);
10+
height: calc(100vh - 145px);
1311
}

‎src/dotnet/APIView/APIViewWeb/Client/css/pages/index.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@
4949

5050
#index-offcanvas-menu-content {
5151
padding: 130px 60px 10px 20px;
52-
min-height: calc(100vh - 40px);
53-
max-height: calc(100vh - 40px);
52+
min-height: calc(100vh - 30px);
53+
max-height: calc(100vh - 30px);
5454
overflow-y: auto;
5555
}
5656

‎src/dotnet/APIView/APIViewWeb/Client/css/pages/review.scss‎

Lines changed: 9 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,19 @@
11
@import "../shared/mixins.scss";
22

3-
#review-info-bar > .SumoSelect:nth-of-type(even) {
4-
width: 20%;
5-
}
6-
7-
#review-info-bar > .SumoSelect:nth-of-type(odd) {
8-
width: 10%;
9-
}
10-
11-
#revision-select ~ .optWrapper {
12-
width: auto;
13-
min-width: 250px;
14-
}
15-
16-
#diff-select ~ .optWrapper {
17-
width: auto;
18-
min-width: 250px;
19-
}
20-
21-
#revision-select {
22-
width: 20%;
3+
#review-info-bar {
4+
font-size: small;
5+
background-color: var(--base-fg-color);
236
}
247

25-
#diff-select {
26-
width: 20%;
8+
.breadcrumb .icon-language {
9+
min-height: 20px;
10+
width: 20px;
2711
}
2812

2913
#review-left {
3014
max-width: none;
3115
min-width: 10px;
32-
height: calc(100vh - 220px);
16+
height: calc(100vh - 120px);
3317
overflow: auto;
3418
max-height: 100vh;
3519
padding: 5px 0px 5px 10px;
@@ -43,25 +27,16 @@
4327
#review-right {
4428
max-width: 100%;
4529
min-width: 100px;
46-
height: calc(100vh - 220px);
30+
height: calc(100vh - 120px);
4731
padding: 0px;
4832
overflow: auto;
4933
background-color: var(--base-fg-color);
5034
scroll-behavior: smooth;
5135
contain: size layout paint;
5236
}
5337

54-
#review-offcanvas-menu-content {
55-
padding: 10px 20px 10px 20px;
56-
min-height: calc(100vh - 190px);
57-
max-height: calc(100vh - 190px);
58-
overflow-y: auto;
59-
margin-top: 150px;
60-
}
61-
6238
.review-approved {
63-
border: solid 2px var(--success-color);
64-
box-shadow: var(--box-shadow-success);
39+
@include review-approval-border;
6540
border-radius: 3px;
6641
}
6742

‎src/dotnet/APIView/APIViewWeb/Client/css/pages/revisions.scss‎

Lines changed: 56 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,61 @@
11
@import "../shared/mixins.scss";
22

3-
#add-revision-button {
4-
@include bottom-right-floating;
5-
@include btn-circle;
6-
@include btn-circle-xl;
3+
#revisions-main-container {
4+
@include main-content-container;
5+
6+
.revisions-list-container {
7+
.card {
8+
cursor: pointer;
9+
}
10+
11+
.card:hover {
12+
box-shadow: var(--box-shadow-link) !important;
13+
}
14+
}
715
}
816

9-
#revisions-main-container {
10-
@include fixed-page-heights;
11-
padding-right: 0px;
12-
padding-left: 0px;
17+
.revisions-list-container {
18+
overflow: auto;
19+
height: 78dvh;
20+
21+
.revision-actions {
22+
align-self: center;
23+
margin-right: 15px;
24+
display: none;
25+
}
26+
27+
.revision-indicator-checks, .revision-actions {
28+
align-self: center;
29+
margin-right: 20px;
30+
}
31+
32+
.card {
33+
flex-direction: row;
34+
overflow: hidden;
35+
background-color: var(--base-fg-color);
36+
37+
.card-body {
38+
padding: 0.5rem 0.75rem;
39+
font-size: small;
40+
}
41+
42+
img {
43+
width: 80px;
44+
height: 80px;
45+
}
46+
47+
.edit-revision-label {
48+
max-width: 500px;
49+
}
50+
}
51+
52+
.card.True {
53+
@include review-approval-border;
54+
}
55+
}
56+
57+
.revisions-list-container > .card:hover {
58+
.revision-actions {
59+
display: inline-flex;
60+
}
1361
}

‎src/dotnet/APIView/APIViewWeb/Client/css/pages/samples.scss‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
@import "../shared/mixins.scss";
22

3-
#add-sample-button {
4-
@include bottom-right-floating;
5-
@include btn-circle;
6-
@include btn-circle-xl;
3+
#samples-main-container {
4+
@include main-content-container;
75
}
86

9-
#samples-main-container {
10-
@include fixed-page-heights;
11-
padding-right: 0px;
12-
padding-left: 0px;
7+
#edit-samples-context, #upload-samples-context {
8+
@include offcanvas-context-large
139
}
1410

1511
.samples-center {
1612
overflow: auto;
13+
height: calc(100vh - 120px);
14+
padding: 0px;
15+
background-color: var(--base-fg-color);
16+
scroll-behavior: smooth;
17+
contain: size layout paint;
1718
}
1819

1920
.usage-sample + .border + .rounded {
@@ -33,4 +34,10 @@
3334

3435
.usage-sample .internal {
3536
display: inline-block;
36-
}
37+
}
38+
39+
.edit-samples-content {
40+
textarea {
41+
height: 60dvh;
42+
}
43+
}

‎src/dotnet/APIView/APIViewWeb/Client/css/shared/bootstraps-overrides.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,9 @@
6363
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
6464
box-shadow: var(--box-shadow-link);
6565
}
66+
.btn-check:focus + .btn, .btn:focus {
67+
box-shadow: var(--box-shadow-link);
68+
}
6669

6770
.page-link {
6871
background-color: var(--base-fg-color);
@@ -91,6 +94,14 @@
9194
border: 1px solid var(--border-color) !important;
9295
}
9396

97+
.border-start {
98+
border-left: 1px solid var(--border-color) !important;
99+
}
100+
101+
.border-end {
102+
border-right: 1px solid var(--border-color) !important;
103+
}
104+
94105
.border-top {
95106
border-top: 1px solid var(--border-color) !important;
96107
}
@@ -99,6 +110,21 @@
99110
border-bottom: 1px solid var(--border-color) !important;
100111
}
101112

113+
.breadcrumb {
114+
margin-bottom: 0rem;
115+
}
116+
.breadcrumb-item + .breadcrumb-item::before {
117+
margin-top: 0rem;
118+
}
119+
120+
.breadcrumb-item + .breadcrumb-item::before {
121+
padding-right: 0.25rem;
122+
}
123+
124+
.breadcrumb-item + .breadcrumb-item {
125+
padding-left: 0.25rem;
126+
}
127+
102128
.list-group-item {
103129
color: var(--base-text-color);
104130
background-color: var(--base-fg-color);

‎src/dotnet/APIView/APIViewWeb/Client/css/shared/icons.scss‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.icon-language {
2-
min-height: 34px;
3-
width: 34px;
2+
min-height: 31px;
3+
width: 31px;
44
display: inline-block;
55
vertical-align: middle;
66
}
@@ -165,67 +165,67 @@
165165

166166
.icon-csharp {
167167
@extend .icon-language;
168-
background: url(/icons/csharp-original.svg) center center no-repeat;
168+
background: url(/icons/csharp-original.svg) center/contain no-repeat;
169169
}
170170

171171
.icon-javascript {
172172
@extend .icon-language;
173-
background: url(/icons/javascript-original.svg) center center no-repeat;
173+
background: url(/icons/javascript-original.svg) center/contain no-repeat;
174174
}
175175

176176
.icon-python {
177177
@extend .icon-language;
178-
background: url(/icons/python-original.svg) center center no-repeat;
178+
background: url(/icons/python-original.svg) center/contain no-repeat;
179179
}
180180

181181
.icon-c {
182182
@extend .icon-language;
183-
background: url(/icons/c-original.svg) center center no-repeat;
183+
background: url(/icons/c-original.svg) center/contain no-repeat;
184184
}
185185

186186
.icon-cplusplus {
187187
@extend .icon-language;
188-
background: url(/icons/cplusplus-original.svg) center center no-repeat;
188+
background: url(/icons/cplusplus-original.svg) center/contain no-repeat;
189189
}
190190

191191
.icon-go {
192192
@extend .icon-language;
193-
background: url(/icons/go-original.svg) center center no-repeat;
193+
background: url(/icons/go-original.svg) center/contain no-repeat;
194194
}
195195

196196
.icon-java {
197197
@extend .icon-language;
198-
background: url(/icons/java-original.svg) center center no-repeat;
198+
background: url(/icons/java-original.svg) center/contain no-repeat;
199199
}
200200

201201
.icon-java-spring {
202202
@extend .icon-language;
203-
background: url(/icons/java-spring-original.svg) center center no-repeat;
203+
background: url(/icons/java-spring-original.svg) center/contain no-repeat;
204204
}
205205

206206
.icon-java-android {
207207
@extend .icon-language;
208-
background: url(/icons/java-android-original.svg) center center no-repeat;
208+
background: url(/icons/java-android-original.svg) center/contain no-repeat;
209209
}
210210

211211
.icon-swift {
212212
@extend .icon-language;
213-
background: url(/icons/swift-original.svg) center center no-repeat;
213+
background: url(/icons/swift-original.svg) center/contain no-repeat;
214214
}
215215

216216
.icon-kotlin {
217217
@extend .icon-language;
218-
background: url(/icons/kotlin-original.svg) center center no-repeat;
218+
background: url(/icons/kotlin-original.svg) center/contain no-repeat;
219219
}
220220

221221
.icon-json {
222222
@extend .icon-language;
223-
background: url(/icons/json-original.svg) center center no-repeat;
223+
background: url(/icons/json-original.svg) center/contain no-repeat;
224224
}
225225

226226
.icon-swagger {
227227
@extend .icon-language;
228-
background: url(/icons/swagger-original.svg) center center no-repeat;
228+
background: url(/icons/swagger-original.svg) center/contain no-repeat;
229229
}
230230

231231
.icon-comments {
@@ -236,9 +236,9 @@
236236
}
237237

238238
.icon-chevron-right {
239-
background: url(/icons/chevron-right.svg) center center no-repeat;
239+
background: url(/icons/chevron-right.svg) center/contain no-repeat;
240240
}
241241

242242
.icon-chevron-up {
243-
background: url(/icons/chevron-up.svg) center center no-repeat;
243+
background: url(/icons/chevron-up.svg) center/contain no-repeat;
244244
}

0 commit comments

Comments
 (0)
⚡