Optimize components

- Use class attribute over className
- Code cleaning
This commit is contained in:
2020-02-26 15:49:56 +01:00
parent b084629b37
commit afb087408c
8 changed files with 18 additions and 72 deletions

View File

@@ -38,8 +38,8 @@
<div class="wrap">
<div class="explore__top">
<a href="/" class="button-control button-control--pink dir-left">
<IconArrow direction="left" color="#fff" className="icon" />
<IconArrow direction="left" color="#fff" className="icon" hidden="true" />
<IconArrow direction="left" color="#fff" class="icon" />
<IconArrow direction="left" color="#fff" class="icon" hidden="true" />
</a>
<div class="title-location title-location--inline">

View File

@@ -96,69 +96,17 @@
<div class="buttons">
<a href="/choose" class="button-control button-control--dashed">
<IconGlobe color="#fff" width="18" />
<IconGlobe color="#fff" width={windowWidth >= 768 ? 22 : 18} />
<svg>
<circle cx="50%" cy="50%" r="{windowWidth >= 768 ? 32 : 24}px"></circle>
</svg>
</a>
<a href="/location/{location.country.slug}/{location.slug}" class="button-control button-control--pink dir-bottom" aria-label="Close">
<IconCross color="#fff" width="18" className="icon" />
<IconCross color="#fff" width="18" className="icon" hidden="true" />
<IconCross color="#fff" width="18" class="icon" />
<IconCross color="#fff" width="18" class="icon" hidden="true" />
</a>
</div>
</div>
<Carousel {photos} viewer={true} />
</section>
<!-- <div class="container">
<div class="nav content">
<a href="/choose" class="button is-info" id="photo_close">Change location</a>
<a href="/location/{location.country.slug}/{location.slug}" class="button is-dark" id="photo_close">Close</a>
</div>
<div class="photo">
<div class="image">
<img src={getThumb(viewerPhotos.current, 'large')} srcset="{getThumb(viewerPhotos.current, 'large')} 1x, {getThumb(viewerPhotos.current, 'large-2x')} 2x" alt="viewerPhotos.current.name">
</div>
<div class="details content">
<strong class="is-size-5">{viewerPhotos.current.name}</strong> <br>
<span>{locationFull}</span> <br>
<span>{indexFormated}</span> <br>
<span>{dayjs(viewerPhotos.current.date).format('MMM Do, YYYY')}</span>
</div>
</div>
<div class="section">
<div class="level">
<div class="level-left">
<a href={path + viewerPhotos.prev.slug} id="photo_prev">
<div class="media">
<div class="media-left">
<img src={getThumb(viewerPhotos.prev, 'thumbnail')} alt={viewerPhotos.prev.name} width="200">
</div>
<div class="media-content content">
<strong class="is-size-5">{viewerPhotos.prev.name}</strong> <br>
<span>{locationFull}</span>
</div>
</div>
</a>
</div>
<div class="level-right">
<a href={path + viewerPhotos.next.slug} id="photo_next">
<div class="media">
<div class="media-content content has-text-right">
<strong class="is-size-5">{viewerPhotos.next.name}</strong> <br>
<span>{locationFull}</span>
</div>
<div class="media-right">
<img src={getThumb(viewerPhotos.next, 'thumbnail')} alt={viewerPhotos.next.name} width="200">
</div>
</div>
</a>
</div>
</div>
</div>
</div> -->