[Frontend] Carte producteurs #1125

common/controllers/CommonController.php

 use common\components\BusinessLogicTrait;
 use common\logic\User\User\Model\User;
 use yii;
+use yii\web\Response;
 
 class CommonController extends \yii\web\Controller 
 {
     {
         Yii::$app->session->addFlash($key, $value, $removeAfterAccess);
     }
+
+    public function redirectReferer(): Response
+    {
+        return $this->redirect(Yii::$app->request->referrer ?: Yii::$app->homeUrl);
+    }
 }
 
 ?>

common/logic/User/UserProducer/Repository/UserProducerRepository.php

             ->filterByBookmark($bookmark)
             ->find();
     }
+
+    public function isProducerBookmarked(User $user): bool
+    {
+        $userProducer = $this->findOneUserProducer($user);
+        return $userProducer ? $userProducer->bookmark : false;
+    }
 }

common/logic/User/UserProducer/Service/UserProducerBuilder.php

             && $newCredit <= $creditLimitReminder;
     }
 
-    public function updateActive(User $user, Producer $producer, bool $active): void
+    public function updateActive(User $user, Producer $producer, bool $active): bool
     {
         $userProducer = $this->createUserProducerIfNotExist(
             $user,
 
         $userProducer->active = $active;
 
-        $this->saveUpdate($userProducer);
+        return $this->saveUpdate($userProducer);
+    }
+
+    public function updateBookmark(UserProducer $userProducer, bool $bookmark)
+    {
+        $userProducer->bookmark = $bookmark;
+        return $this->saveUpdate($userProducer);
+    }
+
+    public function addProducerBookmark(User $user)
+    {
+        $userProducer = $this->createUserProducerIfNotExist($user, $this->getProducerContext());
+        return $this->updateBookmark($userProducer, true);
+    }
+
+    public function removeProducerBookmark(User $user)
+    {
+        $userProducer = $this->createUserProducerIfNotExist($user, $this->getProducerContext());
+        return $this->updateBookmark($userProducer, false);
     }
 }

common/web/css/screen.css

   font-weight: normal;
   font-style: normal;
 }
+/* line 4, ../sass/_common.scss */
+.float-left {
+  float: left;
+}
+
+/* line 8, ../sass/_common.scss */
+.float-right {
+  float: right;
+}
+
 /* Navigation utilisateur en haut du site */
-/* line 6, ../sass/_common.scss */
+/* line 14, ../sass/_common.scss */
 .nav-user-top .navbar {
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
   border-radius: 0px;
   margin-bottom: 0px;
 }
-/* line 10, ../sass/_common.scss */
+/* line 18, ../sass/_common.scss */
 .nav-user-top .navbar .border-left {
   border-left: solid 1px #e0e0e0;
 }
-/* line 16, ../sass/_common.scss */
+/* line 24, ../sass/_common.scss */
 .nav-user-top .dropdown-menu .divider.dropdown-header {
   padding: 0px;
 }
 
 @media screen and (max-width: 768px) {
-  /* line 25, ../sass/_common.scss */
+  /* line 33, ../sass/_common.scss */
   .nav-user-top .navbar ul {
     float: right;
   }
-  /* line 28, ../sass/_common.scss */
+  /* line 36, ../sass/_common.scss */
   .nav-user-top .navbar .link-text {
     display: none;
   }
-  /* line 31, ../sass/_common.scss */
+  /* line 39, ../sass/_common.scss */
   .nav-user-top .navbar .dropdown-menu {
     position: absolute;
     right: 5%;
     -webkit-box-shadow: 0px 0px 4px gray;
     box-shadow: 0px 0px 4px gray;
   }
-  /* line 40, ../sass/_common.scss */
+  /* line 48, ../sass/_common.scss */
   .nav-user-top .navbar .dropdown-menu li a {
     padding-left: 15px;
   }
 }
 /* Block de date */
-/* line 50, ../sass/_common.scss */
+/* line 58, ../sass/_common.scss */
 .block-date {
   margin: 0px auto;
   padding-top: 0px;
   text-align: center;
 }
-/* line 55, ../sass/_common.scss */
+/* line 63, ../sass/_common.scss */
 .block-date .day {
   text-transform: capitalize;
   line-height: 15px;
   font-size: 13px;
   text-transform: uppercase;
 }
-/* line 62, ../sass/_common.scss */
+/* line 70, ../sass/_common.scss */
 .block-date .num {
   font-size: 30px;
   line-height: 35px;
   font-weight: bold;
 }
-/* line 68, ../sass/_common.scss */
+/* line 76, ../sass/_common.scss */
 .block-date .month {
   text-transform: uppercase;
   line-height: 15px;

common/web/sass/_common.scss

 
 @import "compass";
 
+.float-left {
+    float: left;
+}
+
+.float-right {
+    float: right;
+}
+
 /* Navigation utilisateur en haut du site */
 .nav-user-top {
     .navbar {

frontend/controllers/BookmarkController.php

+<?php
+
+/**
+ * Copyright distrib (2018)
+ *
+ * contact@opendistrib.net
+ *
+ * Ce logiciel est un programme informatique servant à aider les producteurs
+ * à distribuer leur production en circuits courts.
+ *
+ * Ce logiciel est régi par la licence CeCILL soumise au droit français et
+ * respectant les principes de diffusion des logiciels libres. Vous pouvez
+ * utiliser, modifier et/ou redistribuer ce programme sous les conditions
+ * de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA
+ * sur le site "http://www.cecill.info".
+ *
+ * En contrepartie de l'accessibilité au code source et des droits de copie,
+ * de modification et de redistribution accordés par cette licence, il n'est
+ * offert aux utilisateurs qu'une garantie limitée.  Pour les mêmes raisons,
+ * seule une responsabilité restreinte pèse sur l'auteur du programme,  le
+ * titulaire des droits patrimoniaux et les concédants successifs.
+ *
+ * A cet égard  l'attention de l'utilisateur est attirée sur les risques
+ * associés au chargement,  à l'utilisation,  à la modification et/ou au
+ * développement et à la reproduction du logiciel par l'utilisateur étant
+ * donné sa spécificité de logiciel libre, qui peut le rendre complexe à
+ * manipuler et qui le réserve donc à des développeurs et des professionnels
+ * avertis possédant  des  connaissances  informatiques approfondies.  Les
+ * utilisateurs sont donc invités à charger  et  tester  l'adéquation  du
+ * logiciel à leurs besoins dans des conditions permettant d'assurer la
+ * sécurité de leurs systèmes et ou de leurs données et, plus généralement,
+ * à l'utiliser et l'exploiter dans les mêmes conditions de sécurité.
+ *
+ * Le fait que vous puissiez accéder à cet en-tête signifie que vous avez
+ * pris connaissance de la licence CeCILL, et que vous en avez accepté les
+ * termes.
+ */
+
+namespace frontend\controllers;
+
+use yii\helpers\Html;
+use yii\filters\VerbFilter;
+use yii\filters\AccessControl;
+use yii\web\NotFoundHttpException;
+
+class BookmarkController extends FrontendController
+{
+    /**
+     * @inheritdoc
+     */
+    public function behaviors()
+    {
+        return [
+            'verbs' => [
+                'class' => VerbFilter::class,
+                'actions' => [
+                ],
+            ],
+            'access' => [
+                'class' => AccessControl::class,
+                'rules' => [
+                    [
+                        'allow' => true,
+                        'roles' => ['@'],
+                    ]
+                ],
+            ],
+        ];
+    }
+
+    public function actionAdd(int $idProducer)
+    {
+        $userProducerManager = $this->getUserProducerManager();
+        $producer = $this->findProducer($idProducer);
+        $userCurrent = $this->getUserCurrent();
+
+        $this->getLogic()->setProducerContext($producer);
+        $userProducerManager->addProducerBookmark($userCurrent);
+
+        $this->setFlash('success', 'Le producteur <strong>' . Html::encode($producer->name) . '</strong> vient d\'être ajouté à votre liste de producteurs.');
+
+        return $this->redirectReferer();
+    }
+
+    public function actionRemove(int $idProducer)
+    {
+        $userProducerManager = $this->getUserProducerManager();
+        $producer = $this->findProducer($idProducer);
+        $userCurrent = $this->getUserCurrent();
+
+        $this->getLogic()->setProducerContext($producer);
+        $userProducerManager->removeProducerBookmark($userCurrent);
+
+        $this->setFlash('success', 'Le producteur <strong>' . Html::encode($producer->name) . '</strong> vient d\'être supprimé de votre liste de producteurs.');
+
+        return $this->redirectReferer();
+    }
+
+    public function findProducer(int $idProducer)
+    {
+        $producerManager = $this->getProducerManager();
+        $producer = $producerManager->findOneProducerById($idProducer);
+        if($producer) {
+            return $producer;
+        }
+        else {
+            throw new NotFoundHttpException('Producteur introuvable.');
+        }
+    }
+}

frontend/controllers/SiteController.php

             $producersArrayReturn[] = [
                 'id' => $producer->id,
                 'name' => Html::encode($producer->name),
+                'type' => Html::encode($producer->type),
+                'address' => Html::encode($producer->postcode.' '.$producer->city),
                 'latitude' => $producer->latitude,
                 'longitude' => $producer->longitude,
+                'link' => $this->getUrlManagerProducer()->createAbsoluteUrl(['site/index', 'slug_producer' => $producer->slug])
             ];
         }
 

frontend/views/layouts/main.php

             <div class="navbar-header">
                 <a id="link-home" href="<?= $this->getUrlManager()->createUrl('site/index'); ?>">
                     Opendistrib
+                    <!--<img src="<?= $this->getUrlManager()->baseUrl ?>/img/souke.png" alt="Souke" />-->
+                    <!--<span style="position: relative;top: 22px;left: 5px;font-family: 'capsuularegular'">-alpha.fr</span>-->
                 </a>
                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse"><span
                             class="sr-only">Toggle navigation</span>

frontend/views/site/producers.php

 termes.
 */
 
-use yii\grid\GridView;
+use common\helpers\GlobalParam;
+use common\logic\User\UserProducer\Wrapper\UserProducerManager;
 use yii\helpers\Html;
 
+$userProducerManager = UserProducerManager::getInstance();
+$userCurrent = GlobalParam::getCurrentUser();
+
 $this->setTitle('Producteurs') ;
 $this->setMeta('description', 'Retrouvez les producteurs présents sur Opendistrib.') ;
 
 <div class="site-producers">
     <h1 class="title-system-order"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;<?= Html::encode($this->title) ?></h1>
 
-    <div class="col-md-6">
-        <div id="producers-list" class="pre-scrollable">
-        <?php foreach($producersArray as $producer): ?>
-            <div class="panel panel-default">
-                <div class="panel-body">
-                    <div class="<?= $producer->logo ? 'col-md-8' : 'col-md-12'; ?>">
-                        <h2><?= Html::encode($producer->name) ?></h2>
-                        <p class="producer-type"><?= Html::encode($producer->type) ?></p>
-                        <p class="producer-location">
-                            <?php if($producer->latitude && $producer->longitude): ?>
-                                <?= Html::a('<span class="glyphicon glyphicon-map-marker"></span> '.Html::encode($producer->postcode.' '.$producer->city),'javascript:void(0);', ['class' => 'btn btn-default view-producer', 'data-id' => $producer->id]);?>
+    <div class="row">
+        <div class="col-md-6 col-sm-12">
+            <div id="producers-list">
+                <div id="producer-search">
+                    <div class="form-group has-feedback">
+                        <input type="text" class="form-control input-lg" placeholder="Rechercher" />
+                        <span class="glyphicon glyphicon-search form-control-feedback"></span>
+                    </div>
+                </div>
+                <div class="alert alert-warning alert-no-results">
+                    Aucun producteur ne correspond à votre recherche.
+                </div>
+                <?php foreach($producersArray as $producer): ?>
+                <div class="panel panel-default panel-producer">
+                    <div class="panel-body">
+                        <div class="<?= $producer->logo ? 'col-md-8 col-sm-8' : 'col-md-12'; ?>">
+                            <h2><?= Html::encode($producer->name) ?></h2>
+                            <p class="producer-type"><?= Html::encode($producer->type) ?></p>
+                            <p class="producer-location">
+                                <?php if($producer->latitude && $producer->longitude): ?>
+                                    <?= Html::a('<span class="glyphicon glyphicon-map-marker"></span> '.Html::encode($producer->postcode.' '.$producer->city),'javascript:void(0);', ['class' => 'btn btn-default view-producer', 'data-id' => $producer->id]);?>
+                                <?php else: ?>
+                                    <span class="glyphicon glyphicon-map-marker"></span>
+                                    <?= Html::encode($producer->postcode.' '.$producer->city); ?>
+                                <?php endif; ?>
+                            </p>
+                        </div>
+                        <?php if($producer->logo): ?>
+                            <div class="col-md-4 col-sm-4">
+                                <div class="logo"<?php if (!is_null($producer->background_color_logo) && strlen($producer->background_color_logo)): ?> style="background-color:<?= Html::encode($producer->background_color_logo); ?>"<?php endif; ?>>
+                                    <img class="img-logo"
+                                         src="<?= \Yii::$app->urlManagerProducer->baseUrl; ?>/uploads/<?= $producer->logo; ?>"
+                                         alt="Logo <?= Html::encode($producer->name) ?>"/>
+                                </div>
+                            </div>
+                        <?php endif; ?>
+                    </div>
+                    <div class="panel-footer">
+                        <?= Html::a('Visiter',Yii::$app->urlManagerProducer->createAbsoluteUrl(['site/index', 'slug_producer' => $producer->slug]), ['class'=>'btn btn-primary']) ; ?>
+
+                        <?php if($userCurrent): ?>
+                            <?php $this->getLogic()->setProducerContext($producer); ?>
+                            <?php if($userProducerManager->isProducerBookmarked($userCurrent)): ?>
+                                <?= Html::a('<span class="glyphicon glyphicon-star"></span>', ['bookmark/remove', 'idProducer' => $producer->id], ['class'=>'btn btn-default float-right', 'data-toggle' => 'tooltip', 'data-placement' => 'bottom', 'data-original-title' => 'Supprimer de ma liste de producteurs']) ; ?>
                             <?php else: ?>
-                                <span class="glyphicon glyphicon-map-marker"></span>
-                                <?= Html::encode($producer->postcode.' '.$producer->city); ?>
+                                <?= Html::a('<span class="glyphicon glyphicon-star-empty"></span>', ['bookmark/add', 'idProducer' => $producer->id], ['class'=>'btn btn-default float-right', 'data-toggle' => 'tooltip', 'data-placement' => 'bottom', 'data-original-title' => 'Ajouter à ma liste de producteurs']) ; ?>
                             <?php endif; ?>
-                        </p>
+                        <?php endif; ?>
                     </div>
-                    <?php if($producer->logo): ?>
-                        <div class="col-md-4">
-                            <div class="logo"<?php if (!is_null($producer->background_color_logo) && strlen($producer->background_color_logo)): ?> style="background-color:<?= Html::encode($producer->background_color_logo); ?>"<?php endif; ?>>
-                                <img class="img-logo"
-                                     src="<?= \Yii::$app->urlManagerProducer->baseUrl; ?>/uploads/<?= $producer->logo; ?>"
-                                     alt="Logo <?= Html::encode($producer->name) ?>"/>
-                            </div>
-                        </div>
-                    <?php endif; ?>
-                </div>
-                <div class="panel-footer">
-                    <?= Html::a('Visiter',Yii::$app->urlManagerProducer->createAbsoluteUrl(['site/index', 'slug_producer' => $producer->slug]), ['class'=>'btn btn-primary']) ; ?>
                 </div>
+                <?php endforeach; ?>
             </div>
-        <?php endforeach; ?>
+        </div>
+        <div class="col-md-6 col-sm-12" id="wrapper-producers-map">
+            <div id="producers-map"></div>
         </div>
     </div>
-    <div class="col-md-6">
-        <div id="producers-map" class=""></div>
-    </div>
-
+    <div class="clr"></div>
 <?php
 /*
 GridView::widget([

frontend/web/js/frontend.js

 
 $(document).ready(function () {
     opendistrib_signup();
-    producersMapModule.init();
+    
+    producersModule.init();
 });
 
 var UrlManager = {
     }
 };
 
-var producersMapModule = {
+var producersModule = {
     map: null,
     mapMarkers: [],
     init: function() {
         this.initMap();
         this.initEventViewProducer();
+        this.initMapPositionFixed();
+        this.initSearch();
     },
     initMap: function() {
         var app = this;
         $.get(UrlManager.getBaseUrl() + 'site/ajax-producers', {}, function(producers) {
             for(var i = 0; i < producers.length ; i++) {
                 if(producers[i].latitude && producers[i].longitude) {
-                    app.mapMarkers[producers[i].id] = L.marker([producers[i].latitude, producers[i].longitude]).bindPopup(producers[i].name).addTo(app.map);
+                    app.mapMarkers[producers[i].id] = L.marker([producers[i].latitude, producers[i].longitude])
+                        .bindPopup('<div class="popup-producer"><div class="name">'+producers[i].name+'</div><div class="type">'+producers[i].type+'</div><div class="address"><span class="glyphicon glyphicon-map-marker"></span>'+producers[i].address+'</div><div class="link"><a href="'+producers[i].link+'" class="btn btn-primary btn-sm">Visiter</a></div></div>')
+                        .addTo(app.map);
                 }
             }
         });
             app.map.fitBounds(markerBounds, {maxZoom: 9});
             marker.openPopup();
         }
+    },
+    initMapPositionFixed: function() {
+
+        var $map = $('#producers-map');
+        var $wrapperProducerMap = $('#wrapper-producers-map');
+
+        $map.width($wrapperProducerMap.width());
+        $(window).resize(function(){
+            $map.width($wrapperProducerMap.width());
+        });
+
+        $(window).scroll(function(){
+            if($(window).width() > 768) {
+                var wrapperProducersMapOffsetTop = $wrapperProducerMap.offset().top;
+                var currentScrollTop = $(this).scrollTop();
+
+                if(currentScrollTop >= wrapperProducersMapOffsetTop) {
+                    if(!$map.hasClass('fixed')) {
+                        $map.addClass('fixed');
+                    }
+                }
+                else {
+                    if($map.hasClass('fixed')) {
+                        $map.removeClass('fixed');
+                    }
+                }
+            }
+        });
+    },
+    initSearch: function() {
+        $('#producer-search input').keyup(function() {
+            var $alertNoResults = $('.alert-no-results');
+            var searchWords = $(this).val().toLowerCase();
+            var count = 0;
+
+            if(searchWords && searchWords.length > 0) {
+                $('.panel-producer').each(function() {
+                    if($(this).find('h2').text().toLowerCase().indexOf(searchWords) >= 0) {
+                        $(this).show();
+                        count ++;
+                    }
+                    else {
+                        $(this).hide();
+                    }
+                });
+
+                if(count) {
+                    $alertNoResults.hide();
+                }
+                else {
+                    $alertNoResults.show();
+                }
+            }
+            else {
+                $alertNoResults.hide();
+                $('.panel-producer').show();
+            }
+        });
     }
 };
 

frontend/web/sass/_responsive.scss

 */
 
 @media screen and (min-width: 768px) {
-    .equal, .equal > div[class*='col-'] {
-        display: -webkit-box;
-        display: -moz-box;
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-        flex:1 1 auto;
-    }
+  .equal, .equal > div[class*='col-'] {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex: 1 1 auto;
+  }
 }
+
 @media screen and (min-width: 768px) and (max-width: 1000px) {
 
-    #header {
-        nav {
-            .navbar-nav {
-                padding-top: 10px ;
-            }
-            
-            ul {
-                li {
-                    a {
-                        padding: 3px 7px ;
-                        font-size: 15px ;
-                    }
-                }
-            }
+  #header {
+    nav {
+      .navbar-nav {
+        padding-top: 10px;
+      }
+
+      ul {
+        li {
+          a {
+            padding: 3px 7px;
+            font-size: 15px;
+          }
         }
+      }
     }
-    
+  }
+
 }
 
 @media screen and (max-width: 768px) {
 
-    #content {
-        padding-top: 0px ;
+  #content {
+    padding-top: 0px;
+  }
+
+  #main {
+    padding-top: 30px;
+
+    .container {
+      padding-left: 15px;
+      padding-right: 15px;
     }
-    
-    #main {
-        padding-top: 30px;
+  }
 
-        .container {
-            padding-left: 15px ;
-            padding-right: 15px ;
-        }
+
+  #header {
+    position: relative;
+
+    #link-home {
+      padding-left: 15px;
     }
-    
 
-    #header {
-        position: relative ;
+    .navbar-collapse {
+      border: 0px none;
+    }
 
-        #link-home {
-            padding-left: 15px ;
-        }
-        
-        .navbar-collapse {
-            border: 0px none ;
-        }
-        
-        nav {
-            width: 100% ;
-            ul {
-                position: relative ;
-                display: block ;
-                float: none ;
-                margin-top: 0px;
-                border: 0px none ;
-                
-                li {
-                    display: block ;
-                    float: none ;
-                    a {
-                        display: block ;
-                        padding: 10px ;
-                    }
-                }
-            }
-        }
+    nav {
+      width: 100%;
 
-        nav ul li#logo {
-            display: block ;
-            a {
-                //margin: 0px auto ;
-            }
-        }
+      ul {
+        position: relative;
+        display: block;
+        float: none;
+        margin-top: 0px;
+        border: 0px none;
 
-        a#link-commander {
-            display: none ;
-        } 
+        li {
+          display: block;
+          float: none;
+
+          a {
+            display: block;
+            padding: 10px;
+          }
+        }
+      }
     }
 
-    #content #points-sale .content {
-        padding-left: 10px ;
-        margin-top: 30px ;
+    nav ul li#logo {
+      display: block;
+
+      a {
+        //margin: 0px auto ;
+      }
     }
 
-    #menu-user {
-        position: relative ;
-        top: 0px ;
+    a#link-commander {
+      display: none;
     }
+  }
+
+  #content #points-sale .content {
+    padding-left: 10px;
+    margin-top: 30px;
+  }
+
+  #menu-user {
+    position: relative;
+    top: 0px;
+  }
+
+  .connected #content {
+    padding-top: 0px;
+  }
+
 
-    .connected #content {
-        padding-top: 0px ;
+  .home {
+    #content #presentation-distrib h3 {
+      color: $courant;
     }
-   
-   
-    
-    .home {
-        #content #presentation-distrib h3 {
-            color: $courant ;
+
+    #main {
+      background-image: none;
+      background-color: #FFF8DC;
+
+      #row-users-producers {
+        display: block;
+        margin-bottom: 20px;
+
+        .col-md-6 {
+          float: left;
+          display: block;
+          width: 100%;
         }
-        
-        #main {
-            background-image: none ;
-            background-color: #FFF8DC ;
-            
-            #row-users-producers {
-                display: block ;
-                margin-bottom: 20px ;
-                
-                .col-md-6 {
-                    float: left ;
-                    display: block;
-                    width: 100% ;
-                }
-            }
+      }
+    }
+  }
+
+  .site-producers {
+    #producers-list {
+      .panel {
+        .panel-body {
+          text-align: center;
+          .logo {
+            display: none;
+          }
         }
+      }
+    }
+    #producers-map {
+      display: none;
     }
-    
-   
+  }
 }

frontend/web/sass/screen.scss

       text-decoration: none;
     }
   }
+
+  a.btn-default {
+    &:focus, &:active {
+      color: $courant;
+    }
+
+    &:hover {
+      color: $courant;
+    }
+  }
 }
 
 #section-user-top {
 
   #link-home {
     float: left;
+    //padding-top: 7px;
+    //padding-bottom: 15px;
     padding-top: 20px;
     padding-bottom: 20px;
     text-decoration: none;
     font-size: 26px;
     display: block;
     font-family: "highvoltageregular";
-
-    color: $color1;
     color: #333;
 
     span {
   position: relative;
   padding: 20px 0px;
   padding-top: 35px;
-  padding-bottom: 50px;
+  padding-bottom: 100px;
 
   h1#title-site, h1 {
     font-family: "highvoltageregular";
   #producers-list {
     max-height: $height-producers-list-map;
 
+    #producer-search {
+      padding-bottom: 15px;
+      //margin-bottom: 10px;
+      //border-bottom: solid 1px #e0e0e0;
+    }
+
+    .alert-no-results {
+      display: none;
+    }
+
     .panel {
 
       .panel-body {
   }
   #producers-map {
     height: $height-producers-list-map;
-    
-    /*position: fixed;
-    height: 100%;
-    width: 100%;*/
+
+    &.fixed {
+      position: fixed !important;
+      top: 20px;
+      width: 300px;
+    }
 
     a {
       text-decoration: none;
     }
+
+    .popup-producer {
+      font-size: 14px;
+      color: #505050;
+
+      .name {
+        font-family: 'capsuularegular';
+        font-weight: bold;
+        font-size: 23px;
+        color: #323232;
+      }
+      .type {
+        text-transform: uppercase;
+        font-size: 13px;
+        margin-bottom: 12px;
+      }
+      .address {
+        margin-bottom: 12px;
+      }
+      .link {
+        color: white;
+      }
+    }
   }
 }