Действия

Widget

Страны-эксплуатанты: различия между версиями

Материал из ВикиВоины

 
(не показано 13 промежуточных версий этого же участника)
Строка 1: Строка 1:
<div class="map-and-descr"><div class="wrap navigation-not-searchable"><svg id="map" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio='xMidYMid meet' stroke-linejoin="round" stroke="#000" viewBox='240 69 1792 858' fill="none" width="550" height="260">
+
<div class="wrap navigation-not-searchable"><svg id="map" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio='xMidYMid meet' stroke-linejoin="round" stroke="#000" viewBox='240 69 1792 858' fill="none" width="550" height="260">
 
   <g id="zoom" vector-effect="non-scaling-stroke">
 
   <g id="zoom" vector-effect="non-scaling-stroke">
 
  <g  transform="matrix(0.4071035,0,0,0.43085839,1588.3644,406.65739)"  id="g6513">  <path    d="m 659.24067,586.22977 h 71.81083 v -9.20406 h 115.33834 l 41.90781,57.71711 v 51.38932 H 806.12208 L 741.6937,635.50982 h -82.45303 z"    id="VU"    title="Вануату"    class="land land-out" />  <path    d="m 659.24067,732.22533 v -96.71551 h 82.45303 l 64.42838,50.62232 h 82.17557 v 46.09319 z"    id="NC"    title="Новая Каледония"    class="land land-out" />  <path    d="m 731.0515,577.02571 v 9.20406 H 659.24067 V 569.1639 h -36.52313 v -67.30072 l 6.52874,-2.86343 2.70096,-0.76407 2.70256,-1.56344 0.78993,-3.1596 35.65291,-22.52064 h 136.43832 l 82.60374,88.87439 -43.74486,17.15937 z"    id="SB"    title="Соломоновы Острова"    class="land land-out" />  <path    d="m 846.38984,577.02576 41.90784,57.71706 v 89.42835 H 996.21064 V 604.55369 H 930.7596 l -2e-5,-44.6873 H 890.1347 Z"    id="FJ"    title="Фиджи"    class="land land-out" />  <path    d="M 807.53096,353.58263 H 934.822 l 46.04144,55.97196 H 1140.203 v 30.6943 h 84.4093 v -72.22188 h -28.4374 v -42.43036 h 106.5273 l 78.0899,171.97836 v 71.31911 H 1273.8135 V 510.21384 H 978.60652 V 470.992 H 807.53096 Z"    id="KI"    title="Кирибати"    class="land land-out" />  <path    d="M 934.822,353.58263 V 187.4723 H 675.27462 v 103.81896 l 132.25634,62.29137 z"    id="MH"    title="Маршалловы Острова"    class="land land-out" />  <path    d="m 737.4333,381.64161 70.09803,-0.25702 -3.7e-4,89.60741 h -70.7549 z"    id="NR"    title="Науру"    class="land land-out" />  <path    d="m 280.36117,268.81749 h 94.22427 v 112.707 h -94.37479 z"    id="PW"    title="Палау"    class="land land-out" />  <path    d="m 422.56392,220.44264 h 157.91846 v 46.49939 h -158.1707 z"    id="GU"    title="Гуам"    class="land land-out" />  <path    d="M 423.22043,112.8006 H 580.96675 V 219.80121 H 422.96845 Z"    id="MP"    title="Северные Марианские Острова"    class="land land-out" />  <path    d="m 374.71573,267.51083 h 300.55889 v 23.78043 l 132.25634,62.29137 -0.27164,27.80196 -432.54431,0 z"    id="FM"    title="Микронезия"    class="land land-out" />  <path    d="m 1069.7867,564.15456 -14.2187,-25.95474 h 73.8017 v 89.14889 h -59.583 z"    id="AS"    title="Американское Самоа"    class="land land-out" />  <path    d="m 1069.7867,604.55371 v -40.39915 l -14.2187,-25.95474 h -43.5588 v 66.35389 z"    id="WS"    title="Самоа"    class="land land-out" />  <path    id="TO"    title="Тонга"    class="land land-out"    d="m 996.21063,604.55371 h 73.57607 V 760.17819 H 945.11857 V 724.0191 h 51.09206 z" />  <path    d="m 890.1347,559.86639 h 121.8745 v -49.65258 l -33.40264,3e-5 V 470.992 h -171.0756 z"    id="TV"    title="Тувалу"    class="land land-out" />  <path    d="m 1273.8134,724.58191 10e-5,-155.68779 h 106.9786 v -71.31911 h 211.6749 v 265.41547 l -60.2341,42.17088 h -149.8231 z"    id="PF"    title="Французская Полинезия"    class="land land-out" />
 
  <g  transform="matrix(0.4071035,0,0,0.43085839,1588.3644,406.65739)"  id="g6513">  <path    d="m 659.24067,586.22977 h 71.81083 v -9.20406 h 115.33834 l 41.90781,57.71711 v 51.38932 H 806.12208 L 741.6937,635.50982 h -82.45303 z"    id="VU"    title="Вануату"    class="land land-out" />  <path    d="m 659.24067,732.22533 v -96.71551 h 82.45303 l 64.42838,50.62232 h 82.17557 v 46.09319 z"    id="NC"    title="Новая Каледония"    class="land land-out" />  <path    d="m 731.0515,577.02571 v 9.20406 H 659.24067 V 569.1639 h -36.52313 v -67.30072 l 6.52874,-2.86343 2.70096,-0.76407 2.70256,-1.56344 0.78993,-3.1596 35.65291,-22.52064 h 136.43832 l 82.60374,88.87439 -43.74486,17.15937 z"    id="SB"    title="Соломоновы Острова"    class="land land-out" />  <path    d="m 846.38984,577.02576 41.90784,57.71706 v 89.42835 H 996.21064 V 604.55369 H 930.7596 l -2e-5,-44.6873 H 890.1347 Z"    id="FJ"    title="Фиджи"    class="land land-out" />  <path    d="M 807.53096,353.58263 H 934.822 l 46.04144,55.97196 H 1140.203 v 30.6943 h 84.4093 v -72.22188 h -28.4374 v -42.43036 h 106.5273 l 78.0899,171.97836 v 71.31911 H 1273.8135 V 510.21384 H 978.60652 V 470.992 H 807.53096 Z"    id="KI"    title="Кирибати"    class="land land-out" />  <path    d="M 934.822,353.58263 V 187.4723 H 675.27462 v 103.81896 l 132.25634,62.29137 z"    id="MH"    title="Маршалловы Острова"    class="land land-out" />  <path    d="m 737.4333,381.64161 70.09803,-0.25702 -3.7e-4,89.60741 h -70.7549 z"    id="NR"    title="Науру"    class="land land-out" />  <path    d="m 280.36117,268.81749 h 94.22427 v 112.707 h -94.37479 z"    id="PW"    title="Палау"    class="land land-out" />  <path    d="m 422.56392,220.44264 h 157.91846 v 46.49939 h -158.1707 z"    id="GU"    title="Гуам"    class="land land-out" />  <path    d="M 423.22043,112.8006 H 580.96675 V 219.80121 H 422.96845 Z"    id="MP"    title="Северные Марианские Острова"    class="land land-out" />  <path    d="m 374.71573,267.51083 h 300.55889 v 23.78043 l 132.25634,62.29137 -0.27164,27.80196 -432.54431,0 z"    id="FM"    title="Микронезия"    class="land land-out" />  <path    d="m 1069.7867,564.15456 -14.2187,-25.95474 h 73.8017 v 89.14889 h -59.583 z"    id="AS"    title="Американское Самоа"    class="land land-out" />  <path    d="m 1069.7867,604.55371 v -40.39915 l -14.2187,-25.95474 h -43.5588 v 66.35389 z"    id="WS"    title="Самоа"    class="land land-out" />  <path    id="TO"    title="Тонга"    class="land land-out"    d="m 996.21063,604.55371 h 73.57607 V 760.17819 H 945.11857 V 724.0191 h 51.09206 z" />  <path    d="m 890.1347,559.86639 h 121.8745 v -49.65258 l -33.40264,3e-5 V 470.992 h -171.0756 z"    id="TV"    title="Тувалу"    class="land land-out" />  <path    d="m 1273.8134,724.58191 10e-5,-155.68779 h 106.9786 v -71.31911 h 211.6749 v 265.41547 l -60.2341,42.17088 h -149.8231 z"    id="PF"    title="Французская Полинезия"    class="land land-out" />
Строка 262: Строка 262:
 
</g>
 
</g>
 
</svg><i class="fa fa-question-circle fa-question-circle-map"></i><div class="map-tooltip">Выберите страну</div><div id="popup" class="popup"></div><div class="controls"><button id="zoom-in">+</button><button id="reset">100%</button><button id="zoom-out">-</button></div></div>
 
</svg><i class="fa fa-question-circle fa-question-circle-map"></i><div class="map-tooltip">Выберите страну</div><div id="popup" class="popup"></div><div class="controls"><button id="zoom-in">+</button><button id="reset">100%</button><button id="zoom-out">-</button></div></div>
<div class="category-message category-message-countries desktop"><i class="fa fa-globe"></i> Прокручивая колесико мыши, вы можете приближать или отдалять карту, чтобы найти необходимую страну. Если значение для этой страны указано, она окрашена бордовым цветом, и при нажатии на неё жёлтым подсветится соответствующая строка в списке слева, равно как и сама выбранная страна окрасится в жёлтый цвет. Если выбрать страну в списке слева, она также подсветится жёлтым цветом на этой карте. </div></div>
 
 
<div class="navigation-not-searchable">
 
<div class="navigation-not-searchable">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
Строка 661: Строка 660:
 
</div>
 
</div>
 
<style>
 
<style>
.map-and-descr {
+
.wrap {
    width: 550px;
 
    float: right;
 
}
 
 
 
.category-message-countries {
 
    margin-top: 310px;
 
    height: 120px;
 
    overflow-y: auto;
 
}
 
 
 
.wrap {
 
 
   position: relative;
 
   position: relative;
 
   float: right;
 
   float: right;
Строка 679: Строка 667:
 
}
 
}
  
.countries-list ul {
+
.countries-list {
   max-height: 400px;
+
   height: 305px;
 
   min-width: 200px;
 
   min-width: 200px;
 
   overflow-y: auto;
 
   overflow-y: auto;
 
   overflow-x: clip;
 
   overflow-x: clip;
 +
}
 +
 +
.countries-list ul {
 +
  margin: 0 10px;
 +
  list-style: none;
 +
  padding-left: 0;
 +
}
 +
 +
.countries ul li {
 
   padding-left: 20px;
 
   padding-left: 20px;
   margin: 10px;
+
   position: relative;
 +
}
 +
 
 +
.countries ul li:hover {
 +
  background: #f5e9b7;
 +
}
 +
 
 +
.active-country-list:hover {
 +
    background: #f5d754!important;
 +
}
 +
 
 +
.countries ul li::before {
 +
    content: '•';
 +
    font-size: 22px;
 +
    font-weight: bold;
 +
    position: absolute;
 +
    left: 5px;
 +
    top: -3px;
 
}
 
}
  
Строка 776: Строка 790:
 
   margin-left: 0;     
 
   margin-left: 0;     
 
   margin-bottom: 10px;
 
   margin-bottom: 10px;
 +
}
 +
 +
.countries-list {
 +
    max-height: 400px;
 +
    height: auto;
 
}
 
}
  

Текущая версия на 10:11, 18 мая 2024

<style>

.wrap {
 position: relative;
 float: right;
 margin-left: 15px;
 background-color: #abc6d9;

}

.countries-list {

 height: 305px;
 min-width: 200px;
 overflow-y: auto;
 overflow-x: clip;

}

.countries-list ul {

 margin: 0 10px;
 list-style: none; 
 padding-left: 0;

}

.countries ul li {

 padding-left: 20px;
 position: relative; 

}

.countries ul li:hover {

 background: #f5e9b7;

}

.active-country-list:hover {

   background: #f5d754!important;

}

.countries ul li::before {

   content: '•'; 
   font-size: 22px;
   font-weight: bold;
   position: absolute;
   left: 5px;
   top: -3px;

}

svg#map {

   outline: none;
   cursor: move;
   }
  1. popup {
 position: absolute;
 display: none;
 background-color: #fff;
 padding: 2px 2px 2px 7px;
 border: 1px solid #ccc;
 z-index: 2;
 font-size: small;

}

.map-tooltip {

height: 45px;
text-align: center;
background: #2786c285;
padding: 10px;
margin-top: -8px;
position: relative;

}

.fa-question-circle-map {

   position: absolute;
   top: 240px;
   left: 5px;
   color: #2d7bb0;

}

.controls {

  display: inline-grid;
  position: absolute;
  top: 10px;
  right: 10px;

}

.controls button {

  font-size: x-large;
  padding: 2px;
  margin: 2px;
  opacity: 0.9;

}

.controls button:focus {

  background-color: #2786c2;

}

  1. reset {
   font-size: medium;

}

path {

 fill: #fff;
 cursor: pointer;

} path:hover {

 fill: #2786c285;

}

.mobile { display: none; }

.desktop { display: block; }

.land-out {

  fill-opacity: 0;
  fill-rule: evenodd;
  stroke: #ffffff;
  stroke-width: 1;
  stroke-dasharray: 0 1 0;
  stroke-opacity: 0.5;

}

.land-out:hover {

  fill-opacity: 1;
  fill: #2786c285;

}

@media only screen and (max-width:640px) {

.wrap {

 margin-left: 0;    
 margin-bottom: 10px;

}

.countries-list {

   max-height: 400px;
   height: auto;

}

.countries-list ul {

margin-left: 0;

}

.fa-question-circle-map {

   top: inherit;
   bottom: 30px;

}

.controls {

   top: 2px;
   right: 5px;

}

.controls button {

   padding: 0 5px;
   margin: 2px;

}

  1. reset {
  font-size: x-small;

}

.mobile { display: block; }

.desktop { display: none; }

.selected {

   fill: #c14e48!important;

}

.land-out.selected {

   fill-opacity: 1;
   fill: #2786c285!important;

}

.map-tooltip {

   padding: 0;
   font-size: 15px;
   height: 25px;
   margin-top: -9px;

}

.map-tooltip img {

   height: 18px;

}

} </style>