refactor v2
This commit is contained in:
Mateusz Gruszczyński
@@ -1,345 +1,461 @@
|
||||
:root {
|
||||
--bg-dark: #0d1117;
|
||||
--card-bg: #161b22;
|
||||
--border-color: #30363d;
|
||||
--text-main: #c9d1d9;
|
||||
--blue-accent: #58a6ff;
|
||||
:root{
|
||||
--bg-dark:#0d1117;
|
||||
--card-bg:#161b22;
|
||||
--border-color:#30363d;
|
||||
--text-main:#c9d1d9;
|
||||
--blue-accent:#58a6ff;
|
||||
--muted:#8b949e;
|
||||
--shadow:0 8px 28px rgba(0,0,0,.35);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-dark);
|
||||
color: var(--text-main);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
padding: 10px;
|
||||
body{
|
||||
background-color:var(--bg-dark);
|
||||
color:var(--text-main);
|
||||
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
|
||||
font-size:14px;
|
||||
margin:0;
|
||||
overflow-x:hidden;
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
/* Wskaźniki napięcia */
|
||||
.gauge-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
.border-dotted{border-style:dotted!important}
|
||||
|
||||
.vm-shell{max-width:1120px;margin:0 auto}
|
||||
|
||||
.vm-card{
|
||||
background-color:var(--card-bg);
|
||||
border:1px solid rgba(255,255,255,.06);
|
||||
border-radius:14px;
|
||||
}
|
||||
|
||||
.gauge-card {
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 12px 5px;
|
||||
text-align: center;
|
||||
.vm-topbar{
|
||||
position:sticky;
|
||||
top:0;
|
||||
z-index:50;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:12px;
|
||||
padding:10px 12px;
|
||||
margin-bottom:12px;
|
||||
background:rgba(13,17,23,.82);
|
||||
backdrop-filter:blur(10px);
|
||||
border:1px solid rgba(255,255,255,.06);
|
||||
border-radius:14px;
|
||||
}
|
||||
|
||||
.gauge-canvas-container {
|
||||
max-width: 80px;
|
||||
margin: 0 auto;
|
||||
.vm-topbar-left,
|
||||
.vm-topbar-right{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
}
|
||||
|
||||
.gauge-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--blue-accent);
|
||||
margin-top: 2px;
|
||||
.vm-topbar-text{
|
||||
font-size:.82rem;
|
||||
color:var(--muted);
|
||||
}
|
||||
|
||||
.voltage-value {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
.vm-dot{
|
||||
width:10px;
|
||||
height:10px;
|
||||
border-radius:999px;
|
||||
background:#6c757d;
|
||||
}
|
||||
|
||||
/* Selektor czasu - Desktop (jedna linia) */
|
||||
.time-selector-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 20px;
|
||||
.vm-dot.online{background:#198754}
|
||||
.vm-dot.offline{background:#dc3545}
|
||||
.vm-dot.connecting{background:#ffc107}
|
||||
|
||||
.gauge-grid{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(3,1fr);
|
||||
gap:10px;
|
||||
margin-bottom:15px;
|
||||
}
|
||||
|
||||
.time-btn {
|
||||
flex: 0 1 auto;
|
||||
font-size: 0.75rem !important;
|
||||
height: 32px;
|
||||
min-width: 45px;
|
||||
padding: 2px 10px !important;
|
||||
border: 1px solid var(--border-color) !important;
|
||||
color: var(--blue-accent) !important;
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.gauge-card{
|
||||
background-color:var(--card-bg);
|
||||
border:1px solid var(--border-color);
|
||||
border-radius:12px;
|
||||
padding:12px 5px;
|
||||
text-align:center;
|
||||
box-shadow:var(--shadow);
|
||||
}
|
||||
|
||||
.time-btn.active {
|
||||
background-color: #1f6feb !important;
|
||||
color: white !important;
|
||||
border-color: #1f6feb !important;
|
||||
.gauge-card:hover{
|
||||
transform:translateY(-2px);
|
||||
transition:transform .15s ease;
|
||||
}
|
||||
|
||||
/* Wykres główny */
|
||||
.main-chart-card {
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
height: 50vh;
|
||||
min-height: 320px;
|
||||
margin-bottom: 15px;
|
||||
.gauge-canvas-container{
|
||||
max-width:80px;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
/* Karta logów i nagłówek */
|
||||
.events-card {
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
.gauge-label{
|
||||
font-size:.75rem;
|
||||
font-weight:600;
|
||||
color:var(--blue-accent);
|
||||
margin-top:2px;
|
||||
}
|
||||
|
||||
.events-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
margin-bottom: 12px;
|
||||
.voltage-value{
|
||||
font-size:1.1rem;
|
||||
font-weight:800;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
#eventRangeLabel {
|
||||
font-size: 0.75rem;
|
||||
color: #8b949e;
|
||||
}
|
||||
/* Kontener zdarzenia */
|
||||
.event-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
.time-selector-wrapper{
|
||||
display:flex;
|
||||
flex-wrap:nowrap;
|
||||
justify-content:center;
|
||||
gap:6px;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
.event-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
.time-btn{
|
||||
flex:0 1 auto;
|
||||
font-size:.75rem!important;
|
||||
height:32px;
|
||||
min-width:45px;
|
||||
padding:2px 10px!important;
|
||||
border:1px solid var(--border-color)!important;
|
||||
color:var(--blue-accent)!important;
|
||||
background:transparent;
|
||||
border-radius:6px;
|
||||
cursor:pointer;
|
||||
transition:all .2s;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.event-badge {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
.time-btn.active{
|
||||
background-color:#1f6feb!important;
|
||||
color:#fff!important;
|
||||
border-color:#1f6feb!important;
|
||||
}
|
||||
|
||||
.event-time {
|
||||
font-family: monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #8b949e;
|
||||
white-space: nowrap;
|
||||
.main-chart-card{
|
||||
background-color:var(--card-bg);
|
||||
border:1px solid var(--border-color);
|
||||
border-radius:12px;
|
||||
padding:15px;
|
||||
height:50vh;
|
||||
min-height:320px;
|
||||
margin-bottom:15px;
|
||||
box-shadow:var(--shadow);
|
||||
}
|
||||
|
||||
.event-desc {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-main);
|
||||
.chart-range-badge{
|
||||
position:absolute;
|
||||
top:10px;
|
||||
right:10px;
|
||||
background:rgba(22,27,34,.9);
|
||||
border:1px solid var(--border-color);
|
||||
border-radius:6px;
|
||||
padding:4px 10px;
|
||||
font-size:.7rem;
|
||||
color:var(--muted);
|
||||
z-index:10;
|
||||
pointer-events:none;
|
||||
backdrop-filter:blur(4px);
|
||||
font-family:monospace;
|
||||
}
|
||||
|
||||
/* Przycisk lupy - Desktop */
|
||||
.zoom-btn-mobile {
|
||||
padding: 5px 10px;
|
||||
background: rgba(88, 166, 255, 0.1);
|
||||
border: 1px solid var(--blue-accent);
|
||||
color: var(--blue-accent);
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
margin-left: 15px;
|
||||
.events-card{
|
||||
background-color:var(--card-bg);
|
||||
border:1px solid var(--border-color);
|
||||
border-radius:12px;
|
||||
padding:15px;
|
||||
box-shadow:var(--shadow);
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.event-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.event-content {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.event-desc {
|
||||
width: 100%;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.time-selector-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr) !important;
|
||||
gap: 10px !important;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.time-btn {
|
||||
width: 80% !important;
|
||||
height: 30px !important;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
.zoom-btn-mobile {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
padding: 8px 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.zoom-btn-mobile:active {
|
||||
background: rgba(88, 166, 255, 0.2);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.events-header{
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
flex-wrap:wrap;
|
||||
gap:5px;
|
||||
margin-bottom:12px;
|
||||
}
|
||||
|
||||
.border-dotted {
|
||||
border-style: dotted !important;
|
||||
#eventRangeLabel{font-size:.75rem;color:var(--muted)}
|
||||
|
||||
.event-item{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:10px 0;
|
||||
border-bottom:1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Modal własnego zakresu */
|
||||
#customRangeModal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 1000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.event-content{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:12px;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--card-bg);
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
max-width: 420px;
|
||||
width: 90%;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
|
||||
border: 1px solid var(--border-color);
|
||||
.event-badge{
|
||||
width:10px;
|
||||
height:10px;
|
||||
border-radius:50%;
|
||||
flex-shrink:0;
|
||||
}
|
||||
|
||||
.modal-content h3 {
|
||||
margin-top: 0;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
.event-time{
|
||||
font-family:monospace;
|
||||
font-size:.85rem;
|
||||
color:var(--muted);
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
.modal-form-group {
|
||||
margin-bottom: 15px;
|
||||
.event-desc{
|
||||
font-size:.85rem;
|
||||
color:var(--text-main);
|
||||
}
|
||||
|
||||
.modal-form-group:last-of-type {
|
||||
margin-bottom: 25px;
|
||||
.event-type-icon{
|
||||
width:22px;
|
||||
text-align:center;
|
||||
opacity:.95;
|
||||
}
|
||||
|
||||
.modal-label {
|
||||
display: block;
|
||||
color: #8b949e;
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
.zoom-btn-mobile{
|
||||
padding:5px 10px;
|
||||
background:rgba(88,166,255,.1);
|
||||
border:1px solid var(--blue-accent);
|
||||
color:var(--blue-accent);
|
||||
border-radius:6px;
|
||||
font-size:.75rem;
|
||||
cursor:pointer;
|
||||
white-space:nowrap;
|
||||
margin-left:15px;
|
||||
}
|
||||
|
||||
.modal-input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: var(--bg-dark);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
color: var(--text-main);
|
||||
font-size: 14px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
|
||||
box-sizing: border-box;
|
||||
#customRangeModal{
|
||||
display:none;
|
||||
position:fixed;
|
||||
inset:0;
|
||||
background:rgba(0,0,0,.8);
|
||||
z-index:1000;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.modal-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--blue-accent);
|
||||
.modal-content{
|
||||
background:var(--card-bg);
|
||||
padding:25px;
|
||||
border-radius:12px;
|
||||
max-width:420px;
|
||||
width:90%;
|
||||
box-shadow:0 8px 32px rgba(0,0,0,.6);
|
||||
border:1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
.modal-content h3{
|
||||
margin:0 0 20px;
|
||||
color:var(--text-main);
|
||||
font-size:1.25rem;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
padding: 8px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
.modal-form-group{margin-bottom:15px}
|
||||
.modal-form-group:last-of-type{margin-bottom:25px}
|
||||
|
||||
.modal-label{
|
||||
display:block;
|
||||
color:var(--muted);
|
||||
margin-bottom:8px;
|
||||
font-size:.875rem;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.modal-btn-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-main);
|
||||
.modal-input{
|
||||
width:100%;
|
||||
padding:10px;
|
||||
background:var(--bg-dark);
|
||||
border:1px solid var(--border-color);
|
||||
border-radius:6px;
|
||||
color:var(--text-main);
|
||||
font-size:14px;
|
||||
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.modal-btn-cancel:hover {
|
||||
background: rgba(48, 54, 61, 0.5);
|
||||
.modal-input:focus{outline:none;border-color:var(--blue-accent)}
|
||||
.modal-input::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer}
|
||||
|
||||
.modal-buttons{
|
||||
display:flex;
|
||||
gap:10px;
|
||||
justify-content:flex-end;
|
||||
}
|
||||
|
||||
.modal-btn-apply {
|
||||
background: #1f6feb;
|
||||
border: 1px solid #1f6feb;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
.modal-btn{
|
||||
padding:8px 20px;
|
||||
border-radius:6px;
|
||||
cursor:pointer;
|
||||
font-size:14px;
|
||||
font-weight:500;
|
||||
transition:all .2s;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.modal-btn-apply:hover {
|
||||
background: #1a5acc;
|
||||
.modal-btn-cancel{
|
||||
background:transparent;
|
||||
border:1px solid var(--border-color);
|
||||
color:var(--text-main);
|
||||
}
|
||||
|
||||
.modal-input::-webkit-calendar-picker-indicator {
|
||||
filter: invert(1);
|
||||
cursor: pointer;
|
||||
.modal-btn-cancel:hover{background:rgba(48,54,61,.5)}
|
||||
|
||||
.modal-btn-apply{
|
||||
background:#1f6feb;
|
||||
border:1px solid #1f6feb;
|
||||
color:#fff;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
/* Badge zakresu wykresu */
|
||||
.chart-range-badge {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: rgba(22, 27, 34, 0.9);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
padding: 4px 10px;
|
||||
font-size: 0.7rem;
|
||||
color: #8b949e;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(4px);
|
||||
font-family: monospace;
|
||||
.modal-btn-apply:hover{background:#1a5acc}
|
||||
|
||||
#apiHelperModal{
|
||||
display:none;
|
||||
position:fixed;
|
||||
inset:0;
|
||||
background:rgba(0,0,0,.82);
|
||||
z-index:1100;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.chart-range-badge {
|
||||
font-size: 0.65rem;
|
||||
padding: 3px 8px;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
.vm-modal-wide{max-width:860px}
|
||||
|
||||
.vm-modal-head{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:10px;
|
||||
margin-bottom:12px;
|
||||
}
|
||||
|
||||
.vm-icon-btn{
|
||||
background:transparent;
|
||||
border:1px solid rgba(255,255,255,.12);
|
||||
color:var(--text-main);
|
||||
border-radius:8px;
|
||||
padding:6px 10px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.vm-modal-grid{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
gap:12px;
|
||||
margin-bottom:12px;
|
||||
}
|
||||
|
||||
.vm-modal-block{margin-top:10px}
|
||||
|
||||
.vm-inline{
|
||||
display:flex;
|
||||
gap:10px;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.vm-mono{
|
||||
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
|
||||
}
|
||||
|
||||
.vm-modal-actions{
|
||||
display:flex;
|
||||
gap:10px;
|
||||
justify-content:flex-end;
|
||||
margin-top:12px;
|
||||
}
|
||||
|
||||
.vm-pre{
|
||||
background:#0b0f14;
|
||||
border:1px solid rgba(255,255,255,.08);
|
||||
border-radius:10px;
|
||||
padding:12px;
|
||||
color:var(--text-main);
|
||||
max-height:260px;
|
||||
overflow:auto;
|
||||
font-size:.78rem;
|
||||
}
|
||||
|
||||
@media (max-width:768px){
|
||||
.vm-modal-grid{grid-template-columns:1fr}
|
||||
.vm-modal-wide{max-width:420px}
|
||||
}
|
||||
|
||||
@media (max-width:576px){
|
||||
.event-item{flex-direction:column;align-items:flex-start}
|
||||
.event-content{flex-wrap:wrap;gap:6px;width:100%}
|
||||
.event-desc{width:100%;margin-bottom:6px}
|
||||
|
||||
.time-selector-wrapper{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(5,1fr)!important;
|
||||
gap:10px!important;
|
||||
padding:0 10px;
|
||||
}
|
||||
|
||||
.time-btn{
|
||||
width:80%!important;
|
||||
height:30px!important;
|
||||
font-size:.75rem!important;
|
||||
}
|
||||
|
||||
.zoom-btn-mobile{
|
||||
width:100%;
|
||||
margin-left:0;
|
||||
margin-top:8px;
|
||||
text-align:center;
|
||||
padding:8px 10px;
|
||||
font-size:.8rem;
|
||||
}
|
||||
|
||||
.zoom-btn-mobile:active{
|
||||
background:rgba(88,166,255,.2);
|
||||
transform:scale(.98);
|
||||
}
|
||||
|
||||
.chart-range-badge{
|
||||
font-size:.65rem;
|
||||
padding:3px 8px;
|
||||
top:8px;
|
||||
right:8px;
|
||||
}
|
||||
}
|
||||
|
||||
.vm-range-quick{
|
||||
display:flex;
|
||||
gap:6px;
|
||||
flex-wrap:wrap;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
.vm-range-btn{
|
||||
padding:4px 10px;
|
||||
font-size:.75rem;
|
||||
border-radius:6px;
|
||||
border:1px solid var(--border-color);
|
||||
background:transparent;
|
||||
color:var(--blue-accent);
|
||||
cursor:pointer;
|
||||
transition:.15s;
|
||||
}
|
||||
|
||||
.vm-range-btn:hover{
|
||||
background:rgba(88,166,255,.1);
|
||||
}
|
||||
|
||||
.vm-range-btn.active{
|
||||
background:#1f6feb;
|
||||
border-color:#1f6feb;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user