aboutsummaryrefslogtreecommitdiff
path: root/src/client/util/reportManager/ReportManager.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/util/reportManager/ReportManager.scss')
-rw-r--r--src/client/util/reportManager/ReportManager.scss473
1 files changed, 473 insertions, 0 deletions
diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss
new file mode 100644
index 000000000..81af41cb0
--- /dev/null
+++ b/src/client/util/reportManager/ReportManager.scss
@@ -0,0 +1,473 @@
+@import '../../views/global/globalCssVariables';
+
+// header
+
+$text-gray: #64748b;
+$outline-gray: #cbd5e1;
+
+.report-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ h2 {
+ margin: 0;
+ padding: 0;
+ font-size: 24px;
+ }
+}
+
+.report-header-vertical {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 4px;
+
+ h2 {
+ margin: 0;
+ padding: 0;
+ padding-bottom: 8px;
+ font-size: 24px;
+ }
+}
+
+// Report
+
+.report-issue {
+ width: 450px;
+ min-width: 300px;
+ padding: 16px;
+ padding-top: 32px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ background-color: #ffffff;
+ text-align: left;
+ position: relative;
+
+ .report-label {
+ font-size: 14px;
+ font-weight: 400;
+ color: $text-gray;
+ }
+
+ .report-section {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .report-textarea {
+ width: 100%;
+ height: 80px;
+ padding: 8px;
+ resize: vertical;
+ // resize: none;
+ }
+
+ .report-selects {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ gap: 16px;
+
+ .report-select {
+ padding: 8px;
+ border-color: $outline-gray;
+
+ .report-opt {
+ padding: 8px;
+ }
+ }
+ }
+}
+
+.report-input {
+ border: none;
+ outline: none;
+ border-bottom: 1px solid $outline-gray;
+ padding: 8px;
+ padding-left: 0;
+ transition: all 0.2s ease;
+
+ &:hover {
+ border-bottom-color: $text-gray;
+ }
+ &:focus {
+ border-bottom-color: #4476f7;
+ }
+}
+
+// View issues
+
+.view-issues {
+ width: 75vw;
+ min-width: 500px;
+ display: flex;
+ gap: 16px;
+ height: 100%;
+ overflow-x: auto;
+
+ video::-webkit-media-controls {
+ display: flex !important;
+ }
+
+ .left {
+ flex: 1;
+ height: 100%;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ background-color: #ffffff;
+ text-align: left;
+ position: relative;
+
+ .issues {
+ padding-top: 24px;
+ position: relative;
+ flex-grow: 1;
+ overflow-y: auto;
+ overflow-x: hidden;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+ }
+
+ .right {
+ position: relative;
+ flex: 1;
+ padding: 16px;
+ min-width: 300px;
+ height: 100%;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+}
+
+// Issue
+
+.issue-card {
+ cursor: pointer;
+ padding: 16px;
+ background-color: #ffffff;
+ border: 1px solid $outline-gray;
+ transition: all 0.1s ease;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ border-radius: 8px;
+ transition: all 0.2s ease;
+
+ .issue-top {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding-bottom: 8px;
+ }
+
+ .issue-label {
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 400;
+ color: $text-gray;
+ padding: 0;
+ margin: 0;
+ }
+
+ .issue-title {
+ font-size: 16px;
+ font-weight: 500;
+ padding: 0;
+ margin: 0;
+ color: #4476f7;
+ }
+
+ &:hover {
+ background-color: #4476f7;
+ border-color: #4476f7;
+ color: #ffffff;
+
+ .issue-label {
+ color: #ffffff;
+ }
+
+ .issue-title {
+ color: #ffffff;
+ }
+ }
+}
+
+// Dropzone
+
+.dropzone {
+ padding: 2rem;
+ border-radius: 0.5rem;
+ border: 2px dashed #f1f5f9;
+
+ .dropzone-instructions {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ color: $text-gray;
+
+ p {
+ text-align: center;
+ }
+ }
+}
+
+.file-list {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ font-size: 14px;
+ color: $text-gray;
+ width: 100%;
+ overflow-x: auto;
+ list-style-type: none;
+ display: flex;
+ align-items: center;
+ gap: 16px;
+
+ .file-name {
+ padding: 8px 12px;
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ white-space: nowrap;
+ }
+}
+
+// Detailed issue view
+
+.issue-view {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ background-color: #ffffff;
+ text-align: left;
+ position: relative;
+ overflow: auto;
+
+ .issue-label {
+ color: $text-gray;
+
+ .issue-link {
+ cursor: pointer;
+ color: #4476f7;
+ }
+ }
+
+ .issue-title {
+ font-size: 24px;
+ margin: 0;
+ padding: 0;
+ }
+
+ .issue-date {
+ font-size: 14px;
+ color: $text-gray;
+ }
+
+ .issue-content {
+ font-size: 14px;
+ color: $text-gray;
+ }
+}
+
+// tags flex lists
+
+.issues-filters {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ .issues-filter {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ white-space: nowrap;
+ overflow-x: auto;
+ }
+}
+
+.issue-tags {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ white-space: nowrap;
+ overflow-x: auto;
+}
+
+// Media previews
+
+.report-media-wrapper {
+ position: relative;
+ cursor: pointer;
+
+ .close-btn {
+ position: absolute;
+ top: 2px;
+ right: 2px;
+ opacity: 0;
+ }
+
+ .report-media-content {
+ position: relative;
+ display: inline block;
+
+ video::-webkit-media-controls {
+ display: flex !important;
+ }
+ }
+
+ .report-media-content::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as desired */
+ opacity: 0;
+ transition: opacity 0.3s ease; /* Transition for smooth effect */
+ pointer-events: none;
+
+ video::-webkit-media-controls {
+ pointer-events: all;
+ }
+ }
+
+ &:hover {
+ .report-media-content::after {
+ opacity: 1;
+ }
+
+ .close-btn {
+ opacity: 1;
+ }
+ }
+}
+
+.report-audio-wrapper {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+@media (max-width: 1100px) {
+ .report-header {
+ flex-direction: column;
+ align-items: stretch;
+ gap: 2rem;
+ }
+}
+
+// Tag styling
+
+.report-tag {
+ box-sizing: border-box;
+ padding: 4px 10px;
+ font-size: 10px;
+ border-radius: 32px;
+ transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+// Old code
+
+// <---------------------------------------------------------------------------->
+
+// .issue-list-wrapper {
+// position: relative;
+// min-width: 250px;
+// background-color: $light-blue;
+// overflow-y: scroll;
+// }
+
+// .issue-list {
+// display: flex;
+// align-items: center;
+// justify-content: space-between;
+// padding: 5px;
+// margin: 5px;
+// border-radius: 5px;
+// border: 1px solid grey;
+// background-color: lightgoldenrodyellow;
+// }
+
+// // issue should pop up when the user hover over the issue
+// .issue-list:hover {
+// box-shadow: 2px;
+// cursor: pointer;
+// border: 3px solid #252b33;
+// }
+
+// .issue-content {
+// background-color: white;
+// padding: 10px;
+// flex: 1 1 auto;
+// overflow-y: scroll;
+// }
+
+// .issue-title {
+// font-size: 20px;
+// font-weight: 600;
+// color: black;
+// }
+
+// .issue-body {
+// padding: 0 10px;
+// width: 100%;
+// text-align: left;
+// }
+
+// .issue-body > * {
+// margin-top: 5px;
+// }
+
+// .issue-body img,
+// .issue-body video {
+// display: block;
+// max-width: 100%;
+// }
+
+// .report-issue-fab {
+// position: fixed;
+// bottom: 20px;
+// right: 20px;
+// display: flex;
+// align-items: center;
+// justify-content: center;
+// cursor: pointer;
+// }
+
+// .loading-center {
+// margin: auto 0;
+// }
+
+// .settings-content label {
+// margin-top: 10px;
+// }
+
+// .report-disclaimer {
+// font-size: 8px;
+// color: grey;
+// padding-right: 50px;
+// font-style: italic;
+// text-align: left;
+// }
+
+// .flex-select {
+// display: flex;
+// align-items: center;
+// justify-content: center;
+// gap: 10px;
+// }
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-27 11:22:05 +0000