Додан моніторінг застосунку

Додани веб компоненти карточок територій та повідомлень

web/lib/pages/territory/list/style.css

@@ -202,7 +202,7 @@
 
 .page-territory #list-house,
 .page-territory #list-homestead {
-    width: 100%;
+    width: calc(100% - 20px);
     margin: 0;
     display: flex;
     flex-wrap: wrap;
@@ -212,157 +212,6 @@
     overflow-y: auto;
     align-items: flex-start;
     transition: .3s ease;
-}
-
-.page-territory .card {
-    position: relative;
-    width: 300px;
-    height: 200px;
-    background-color: var(--ColorThemes2);
-    margin: 10px;
-    overflow: hidden;
-    cursor: pointer;
-    border-radius: calc(var(--border-radius) - 5px);
-}
-
-@media (max-width: 2300px) {
-    .page-territory .card {
-        width: calc((100% / 5) - 40px);
-    }
-}
-
-@media (max-width: 1960px) {
-    .page-territory .card {
-        width: calc((100% / 4) - 40px);
-    }
-}
-
-@media (max-width: 1640px) {
-    .page-territory .card {
-        width: calc((100% / 3) - 40px);
-    }
-}
-
-@media (max-width: 1280px) {
-    .page-territory .card {
-        width: calc((100% / 2) - 40px);
-    }
-}
-
-@media (max-width: 650px) {
-    .page-territory .card {
-        width: 100%;
-    }
-}
-
-@media(hover: hover) {
-    .page-territory .card:hover {
-        opacity: 0.8;
-    }
-}
-
-.page-territory .card>i {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    z-index: 1;
-    filter: blur(2px);
-    /* background-repeat: round; */
-    background-size: cover;
-    background-position: center;
-    background-color: var(--PrimaryColor);
-    border-radius: calc(var(--border-radius) - 5px);
-}
-
-.page-territory .card>a {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 10;
-}
-
-.page-territory .contents {
-    position: absolute;
-    z-index: 2;
-    background: rgb(64 64 64 / 0.7);
-    width: 100%;
-    height: 100%;
-    font-size: 40px;
-    font-weight: 500;
-    color: #fff;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: space-between;
-    border-radius: calc(var(--border-radius) - 5px);
-}
-
-
-.page-territory .info {
-    margin: 10px;
-}
-
-.page-territory .info>div {
-    width: 100%;
-    height: 35px;
-    display: flex;
-    background: var(--ColorThemes0);
-    align-items: center;
-    justify-content: center;
-    font-size: var(--FontSize1);
-    color: var(--ColorThemes3);
-    border-radius: calc(var(--border-radius) - 5px - 4px);
-    position: relative;
-    overflow: hidden;
-}
-
-.page-territory .progress {
-    background: var(--PrimaryColor);
-    height: 100%;
-    position: absolute;
-    z-index: 1;
-    left: 0;
-}
-
-.page-territory .info>div>span {
-    color: var(--ColorThemes3);
-    font-size: var(--FontSize3);
-    font-weight: 300;
-    z-index: 2;
-}
-
-.page-territory .info>div>p {
-    color: var(--ColorThemes3);
-    font-size: var(--FontSize3);
-    font-weight: 400;
+    gap: 20px;
     padding: 10px;
-    z-index: 2;
-}
-
-.page-territory .sheep {
-    margin: 10px;
-    max-height: 50px;
-    border-radius: calc(var(--border-radius) - 5px - 4px);
-    padding: 10px 0;
-    margin-top: 10px;
-    display: flex;
-    background: var(--PrimaryColor);
-    align-items: center;
-    flex-direction: column;
-    justify-content: space-around;
-}
-
-.page-territory .sheep>span {
-    color: var(--PrimaryColorText);
-    font-size: var(--FontSize3);
-    font-weight: 400;
-    opacity: 0.8;
-}
-
-.page-territory .sheep>p {
-    color: var(--PrimaryColorText);
-    font-size: var(--FontSize4);
-    font-weight: 400;
-    margin-top: 5px;
 }