143143 function init ( ) {
144144 var toggle = document . getElementById ( "activity-percent-toggle" )
145145 if ( ! toggle ) return
146- setActivityMode ( false )
146+ var storageKey = "entity_activity_display_mode"
147+ var initialPercentMode = false
148+ try {
149+ var saved = localStorage . getItem ( storageKey )
150+ if ( saved === "percent" || saved === "true" || saved === "1" ) {
151+ initialPercentMode = true
152+ } else if ( saved === "absolute" || saved === "false" || saved === "0" ) {
153+ initialPercentMode = false
154+ }
155+ } catch ( e ) {
156+ // ignore storage errors
157+ }
158+ toggle . checked = initialPercentMode
159+ setActivityMode ( initialPercentMode )
147160 toggle . addEventListener ( "change" , function ( ) {
148- setActivityMode ( toggle . checked )
161+ var newMode = toggle . checked
162+ try {
163+ localStorage . setItem ( storageKey , newMode ? "percent" : "absolute" )
164+ } catch ( e ) {
165+ // ignore storage errors
166+ }
167+ setActivityMode ( newMode )
149168 } )
150169 }
151170
402421 background-color : # 6f42c1/* purple */
403422 color : # ffffff
404423 }
424+ /* Keep two columns in Duties, Income, Missed Rewards and Slashings grids even on smallest screens */
425+ @media (max-width : 575.98px ) {
426+ .duties-grid > [class *= "col-" ],
427+ .income-grid > [class *= "col-" ],
428+ .missed-grid > [class *= "col-" ],
429+ .slashings-grid > [class *= "col-" ] {
430+ flex : 0 0 50% ;
431+ max-width : 50% ;
432+ }
433+ }
405434 </ style >
406435{{ end }}
407436
@@ -429,20 +458,20 @@ <h1 class="h4 mb-0 mr-2">Entity Dashboard</h1>
429458 </ div >
430459 </ div >
431460 < div class ="mb-2 d-flex align-items-center justify-content-between ">
432- < div >
433- < span class ="badge badge-entity "> < i class ="fas fa-building mr-1 " aria-hidden ="true "> </ i > Entity</ span >
461+ < div class =" d-flex align-items-center " style =" flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; " >
462+ < span class ="badge badge-entity "> < i class ="fas fa-building " aria-hidden ="true "> </ i > < span class =" d-none d-sm-inline " > Entity</ span > </ span >
434463 {{ if and .Data.HasRealSubEntities (ne .Data.SubEntity "-") }}
435- < a class ="ml-2 font-weight-boldhref ="/entity/{{ .Data.Entity | urlPathEscape }}/- "> {{ .Data.Entity }}</ a >
464+ < a class ="font-weight-bold ml-2 " href ="/entity/{{ .Data.Entity | urlPathEscape }}/- " style =" display: inline-block; max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; " title =" {{ .Data.Entity }} "> {{ .Data.Entity }}</ a >
436465 {{ else }}
437- < span class ="ml-2 font-weight-bold "> {{ .Data.Entity }}</ span >
466+ < span class ="font-weight-bold ml-2" style =" display: inline-block; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; " title =" {{ .Data.Entity }} "> {{ .Data.Entity }}</ span >
438467 {{ end }}
439468 {{ if .Data.HasRealSubEntities }}
440469 < span class ="mx-2 "> /</ span >
441- < span class ="badge badge-subentity "> < i class ="fas fa-sitemap mr-1 " aria-hidden ="true "> </ i > Sub-Entity</ span >
442- < span class ="ml-2 font-weight-bold "> {{ .Data.SubEntity }}</ span >
470+ < span class ="badge badge-subentity "> < i class ="fas fa-sitemap " aria-hidden ="true "> </ i > < span class =" d-none d-sm-inline " > Sub-Entity</ span > </ span >
471+ < span class ="font-weight-bold ml-2" style =" display: inline-block; max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; " title =" {{ .Data.SubEntity }} "> {{ .Data.SubEntity }}</ span >
443472 {{ end }}
444473 </ div >
445- < div class ="d-flex align-items-center ">
474+ < div class ="d-flex align-items-center " style =" flex: 0 0 auto; " >
446475 < span class ="badge badge-pill bg-success text-white mr-2 px-2 py-1 validator-chip " {{ .Data.OnlineBreakdownHTML }} aria-label ="Online validators: {{ formatThousandsInt .Data.OnlineCount }} ">
447476 < i class ="fas fa-power-off mr-1 " aria-hidden ="true "> </ i > {{ formatThousandsInt .Data.OnlineCount }}
448477 </ span >
@@ -534,7 +563,7 @@ <h1 class="h4 mb-0 mr-2">Entity Dashboard</h1>
534563 </ div >
535564 </ div >
536565 </ div >
537- < div class ="row ">
566+ < div class ="row duties-grid ">
538567 < div class ="col-sm-6 mb-2 ">
539568 < div class ="stat-heading "> < i class ="fas fa-check-circle mr-1 " aria-hidden ="true "> </ i > Attestations</ div >
540569 < div class ="stat ">
@@ -604,7 +633,7 @@ <h1 class="h4 mb-0 mr-2">Entity Dashboard</h1>
604633 < div class ="card h-100 ">
605634 < div class ="card-body ">
606635 < div class ="section-title mb-3 "> < i class ="fas fa-coins mr-1 " aria-hidden ="true "> </ i > Income</ div >
607- < div class ="row ">
636+ < div class ="row income-grid ">
608637 < div class ="col-sm-4 mb-2 ">
609638 < div class ="stat text-warning ">
610639 {{ formatElCurrency .Data.TotalRewardsWei "ETH" 2 true false false true }}
@@ -628,7 +657,7 @@ <h1 class="h4 mb-0 mr-2">Entity Dashboard</h1>
628657 </ div >
629658 < hr />
630659 < div class ="section-title mb-3 "> < i class ="fas fa-times-circle mr-1 " aria-hidden ="true "> </ i > Missed Rewards</ div >
631- < div class ="row ">
660+ < div class ="row missed-grid ">
632661 < div class ="col-sm-6 mb-2 ">
633662 < div class ="stat text-warning ">
634663 {{ formatClCurrency .Data.TotalMissedClRewards "ETH" 2 true false false
@@ -667,7 +696,7 @@ <h1 class="h4 mb-0 mr-2">Entity Dashboard</h1>
667696 </ div >
668697 < hr />
669698 < div class ="section-title mb-3 "> < i class ="fas fa-gavel mr-1 " aria-hidden ="true "> </ i > Slashings</ div >
670- < div class ="row ">
699+ < div class ="row slashings-grid ">
671700 < div class ="col-sm-6 mb-2 ">
672701 < div class ="stat text-danger "> {{ formatThousandsInt .Data.SlashedInPeriodMax }}</ div >
673702 < div class ="stat-label "> Slashed Validators</ div >
0 commit comments