Mixing
Open content in drawer that expands past the width of containing div but never goes past max-width of body...
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I have something setup right now that's close to what I'm working on: https://codepen.io/gojiHime/pen/EGQNNJ
What I want to do is, when clicking "expand" for any of the blocks, I want the "drawer" (which has a red border) to open so that it fills up the space below the entire row and pushes the next row down but never goes past the max-width of the page content which is 1080px.
For what I'm working on, the content is populated with a loop through data that's all connected. I tried having a separate area for the content blocks and a separate area for the drawers, but the drawers would always open below all the rows and not under the current row (if that makes sense).
I did something like this years ago but can't remember nor does the example exist anymore, but it's possible somehow.
Here is the jQuery I have setup, although, I don't think this is a jQuery issue but more of a CSS/HTML issue but I could be wrong.
$("a").each(function() {
$(this).on("click", function(e) {
e.preventDefault();
let drawers = $(".drawer");
drawers.slideUp();
let drawer = $(this).parent().next().slideToggle();
});
});
In case it helps, this is the code from the blade template from the project I'm working on that gets the information needed:
@if(have_rows('product_info'))
@while( have_rows('product_info')) @php the_row() @endphp
@php
$productName = get_sub_field('product_name');
$productSublabel = get_sub_field('product_sublabel');
$productBlueTxt = get_sub_field('blue_label_text');
$productSummary = get_sub_field('product_summary');
$productImg = get_sub_field('product_thumbnail');
$productHashId = get_sub_field('product_hash');
$drawerProductName = get_sub_field('drawer_product_name');
$drawerProductDesc = get_sub_field('drawer_product_description');
$gallery = get_sub_field('drawer_gallery');
$styleHeader = get_sub_field('style_options_header');
$colorsHeader = get_sub_field('color_options_header');
$storesHeader = get_sub_field('availability_header');
@endphp
<div class="product-content">
<div class="product-block">
<div class="image-label-group">
<img class="product-photo" src="{{ $productImg }}" alt="product image"/>
@if($productBlueTxt)
<p class="prod-blue-label">{{ $productBlueTxt }}</p>
@endif
</div>
<div class="product-info-group">
<p class="product-label">{{ $productName }}</p>
@if($productSublabel)
<p class="prod-sublabel">{{ $productSublabel }}</p>
@endif
<div class="prod-summary">{!! $productSummary !!}</div>
<a class="explore-btn" href="#">Explore</a>
</div>
</div>
<div class="product-drawer">
<div class="product-drawer-inner">
<img class="close-drawer" src="@asset('images/Icon-CloseButton.svg')" alt="" />
@if($gallery)
<div class="gallery-container">
@foreach($gallery as $image)
<div class="gallery-item">
<a href="{{ $image['sizes']['large'] }}">
<img src="{{ $image['sizes']['thumbnail'] }}" alt=""/></a>
</div>
@endforeach
</div>
@endif
<div class="product-features">
<p id="drawer-prod-name">{{ $drawerProductName }}</p>
@if($styleHeader)
<div class="section-with-border">
<p id="style-header" class="drawer-option-headers">{{ $styleHeader }}</p>
@if(have_rows('style_options'))
@while( have_rows('style_options')) @php the_row() @endphp
@php
$styleThumb = get_sub_field('style_thumbnail');
@endphp
<img src="{{$styleThumb}}" class="option-thumbnail" alt=""/>
@endwhile
@endif
</div>
@endif
@if($colorsHeader)
<div class="section-with-border">
<p class="color-header drawer-option-headers">{{ $colorsHeader }}</p>
@if(have_rows('colors'))
@while( have_rows('colors')) @php the_row() @endphp
@php
$colorVal = get_sub_field('color_value');
$colorLbl = get_sub_field('color_label');
@endphp
<div class="color-option-container">
<div style="background-color: {!! $colorVal !!};" class="option-thumbnail"></div>
<p class="color-label">{{$colorLbl}}</p>
</div>
@endwhile
@endif
</div>
@endif
@if($storesHeader)
<div class="stores-container">
<p class="stores-header drawer-option-headers">{{ $storesHeader }}</p>
@if(have_rows('stores'))
@while( have_rows('stores')) @php the_row() @endphp
@php
$storeThumb = get_sub_field('store_thumbnail');
@endphp
<div class="store-thumb-container">
<img src="{{$storeThumb}}" class="option-thumbnail" alt="" />
</div>
@endwhile
@endif
</div>
@endif
<div class="section-with-border social-icons">
<p class="drawer-option-headers">Share this Product!</p>
<div class="icon-container">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
</div>
<div class="icon-container">
<a href="#">
<i class="fab fa-twitter"></i>
</a>
</div>
<div class="icon-container">
<a href="#">
<i class="fab fa-pinterest"></i>
</a>
</div>
<div class="icon-container">
<a href="#">
<i class="fa fa-envelope"></i>
</a>
</div>
</div>
<div class="product-desc">
<input id="show-more" type="checkbox">
<label class="show-lbl" for="show-more"></label>
<div class="panel">
{!! $drawerProductDesc !!}
</div>
<div class="fade"></div>
</div>
</div>
</div>
</div>
</div>
@endwhile
@endif
jquery html css
asked Jan 3 at 14:55
Dejsa CocanDejsa Cocan
7341932
add a comment |
0
I have something setup right now that's close to what I'm working on: https://codepen.io/gojiHime/pen/EGQNNJ
What I want to do is, when clicking "expand" for any of the blocks, I want the "drawer" (which has a red border) to open so that it fills up the space below the entire row and pushes the next row down but never goes past the max-width of the page content which is 1080px.
For what I'm working on, the content is populated with a loop through data that's all connected. I tried having a separate area for the content blocks and a separate area for the drawers, but the drawers would always open below all the rows and not under the current row (if that makes sense).
I did something like this years ago but can't remember nor does the example exist anymore, but it's possible somehow.
Here is the jQuery I have setup, although, I don't think this is a jQuery issue but more of a CSS/HTML issue but I could be wrong.
$("a").each(function() {
$(this).on("click", function(e) {
e.preventDefault();
let drawers = $(".drawer");
drawers.slideUp();
let drawer = $(this).parent().next().slideToggle();
});
});
In case it helps, this is the code from the blade template from the project I'm working on that gets the information needed:
@if(have_rows('product_info'))
@while( have_rows('product_info')) @php the_row() @endphp
@php
$productName = get_sub_field('product_name');
$productSublabel = get_sub_field('product_sublabel');
$productBlueTxt = get_sub_field('blue_label_text');
$productSummary = get_sub_field('product_summary');
$productImg = get_sub_field('product_thumbnail');
$productHashId = get_sub_field('product_hash');
$drawerProductName = get_sub_field('drawer_product_name');
$drawerProductDesc = get_sub_field('drawer_product_description');
$gallery = get_sub_field('drawer_gallery');
$styleHeader = get_sub_field('style_options_header');
$colorsHeader = get_sub_field('color_options_header');
$storesHeader = get_sub_field('availability_header');
@endphp
<div class="product-content">
<div class="product-block">
<div class="image-label-group">
<img class="product-photo" src="{{ $productImg }}" alt="product image"/>
@if($productBlueTxt)
<p class="prod-blue-label">{{ $productBlueTxt }}</p>
@endif
</div>
<div class="product-info-group">
<p class="product-label">{{ $productName }}</p>
@if($productSublabel)
<p class="prod-sublabel">{{ $productSublabel }}</p>
@endif
<div class="prod-summary">{!! $productSummary !!}</div>
<a class="explore-btn" href="#">Explore</a>
</div>
</div>
<div class="product-drawer">
<div class="product-drawer-inner">
<img class="close-drawer" src="@asset('images/Icon-CloseButton.svg')" alt="" />
@if($gallery)
<div class="gallery-container">
@foreach($gallery as $image)
<div class="gallery-item">
<a href="{{ $image['sizes']['large'] }}">
<img src="{{ $image['sizes']['thumbnail'] }}" alt=""/></a>
</div>
@endforeach
</div>
@endif
<div class="product-features">
<p id="drawer-prod-name">{{ $drawerProductName }}</p>
@if($styleHeader)
<div class="section-with-border">
<p id="style-header" class="drawer-option-headers">{{ $styleHeader }}</p>
@if(have_rows('style_options'))
@while( have_rows('style_options')) @php the_row() @endphp
@php
$styleThumb = get_sub_field('style_thumbnail');
@endphp
<img src="{{$styleThumb}}" class="option-thumbnail" alt=""/>
@endwhile
@endif
</div>
@endif
@if($colorsHeader)
<div class="section-with-border">
<p class="color-header drawer-option-headers">{{ $colorsHeader }}</p>
@if(have_rows('colors'))
@while( have_rows('colors')) @php the_row() @endphp
@php
$colorVal = get_sub_field('color_value');
$colorLbl = get_sub_field('color_label');
@endphp
<div class="color-option-container">
<div style="background-color: {!! $colorVal !!};" class="option-thumbnail"></div>
<p class="color-label">{{$colorLbl}}</p>
</div>
@endwhile
@endif
</div>
@endif
@if($storesHeader)
<div class="stores-container">
<p class="stores-header drawer-option-headers">{{ $storesHeader }}</p>
@if(have_rows('stores'))
@while( have_rows('stores')) @php the_row() @endphp
@php
$storeThumb = get_sub_field('store_thumbnail');
@endphp
<div class="store-thumb-container">
<img src="{{$storeThumb}}" class="option-thumbnail" alt="" />
</div>
@endwhile
@endif
</div>
@endif
<div class="section-with-border social-icons">
<p class="drawer-option-headers">Share this Product!</p>
<div class="icon-container">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
</div>
<div class="icon-container">
<a href="#">
<i class="fab fa-twitter"></i>
</a>
</div>
<div class="icon-container">
<a href="#">
<i class="fab fa-pinterest"></i>
</a>
</div>
<div class="icon-container">
<a href="#">
<i class="fa fa-envelope"></i>
</a>
</div>
</div>
<div class="product-desc">
<input id="show-more" type="checkbox">
<label class="show-lbl" for="show-more"></label>
<div class="panel">
{!! $drawerProductDesc !!}
</div>
<div class="fade"></div>
</div>
</div>
</div>
</div>
</div>
@endwhile
@endif
jquery html css
asked Jan 3 at 14:55
Dejsa CocanDejsa Cocan
7341932
add a comment |
0
0
0
I have something setup right now that's close to what I'm working on: https://codepen.io/gojiHime/pen/EGQNNJ
What I want to do is, when clicking "expand" for any of the blocks, I want the "drawer" (which has a red border) to open so that it fills up the space below the entire row and pushes the next row down but never goes past the max-width of the page content which is 1080px.
For what I'm working on, the content is populated with a loop through data that's all connected. I tried having a separate area for the content blocks and a separate area for the drawers, but the drawers would always open below all the rows and not under the current row (if that makes sense).
I did something like this years ago but can't remember nor does the example exist anymore, but it's possible somehow.
Here is the jQuery I have setup, although, I don't think this is a jQuery issue but more of a CSS/HTML issue but I could be wrong.
$("a").each(function() {
$(this).on("click", function(e) {
e.preventDefault();
let drawers = $(".drawer");
drawers.slideUp();
let drawer = $(this).parent().next().slideToggle();
});
});
In case it helps, this is the code from the blade template from the project I'm working on that gets the information needed:
@if(have_rows('product_info'))
@while( have_rows('product_info')) @php the_row() @endphp
@php
$productName = get_sub_field('product_name');
$productSublabel = get_sub_field('product_sublabel');
$productBlueTxt = get_sub_field('blue_label_text');
$productSummary = get_sub_field('product_summary');
$productImg = get_sub_field('product_thumbnail');
$productHashId = get_sub_field('product_hash');
$drawerProductName = get_sub_field('drawer_product_name');
$drawerProductDesc = get_sub_field('drawer_product_description');
$gallery = get_sub_field('drawer_gallery');
$styleHeader = get_sub_field('style_options_header');
$colorsHeader = get_sub_field('color_options_header');
$storesHeader = get_sub_field('availability_header');
@endphp
<div class="product-content">
<div class="product-block">
<div class="image-label-group">
<img class="product-photo" src="{{ $productImg }}" alt="product image"/>
@if($productBlueTxt)
<p class="prod-blue-label">{{ $productBlueTxt }}</p>
@endif
</div>
<div class="product-info-group">
<p class="product-label">{{ $productName }}</p>
@if($productSublabel)
<p class="prod-sublabel">{{ $productSublabel }}</p>
@endif
<div class="prod-summary">{!! $productSummary !!}</div>
<a class="explore-btn" href="#">Explore</a>
</div>
</div>
<div class="product-drawer">
<div class="product-drawer-inner">
<img class="close-drawer" src="@asset('images/Icon-CloseButton.svg')" alt="" />
@if($gallery)
<div class="gallery-container">
@foreach($gallery as $image)
<div class="gallery-item">
<a href="{{ $image['sizes']['large'] }}">
<img src="{{ $image['sizes']['thumbnail'] }}" alt=""/></a>
</div>
@endforeach
</div>
@endif
<div class="product-features">
<p id="drawer-prod-name">{{ $drawerProductName }}</p>
@if($styleHeader)
<div class="section-with-border">
<p id="style-header" class="drawer-option-headers">{{ $styleHeader }}</p>
@if(have_rows('style_options'))
@while( have_rows('style_options')) @php the_row() @endphp
@php
$styleThumb = get_sub_field('style_thumbnail');
@endphp
<img src="{{$styleThumb}}" class="option-thumbnail" alt=""/>
@endwhile
@endif
</div>
@endif
@if($colorsHeader)
<div class="section-with-border">
<p class="color-header drawer-option-headers">{{ $colorsHeader }}</p>
@if(have_rows('colors'))
@while( have_rows('colors')) @php the_row() @endphp
@php
$colorVal = get_sub_field('color_value');
$colorLbl = get_sub_field('color_label');
@endphp
<div class="color-option-container">
<div style="background-color: {!! $colorVal !!};" class="option-thumbnail"></div>
<p class="color-label">{{$colorLbl}}</p>
</div>
@endwhile
@endif
</div>
@endif
@if($storesHeader)
<div class="stores-container">
<p class="stores-header drawer-option-headers">{{ $storesHeader }}</p>
@if(have_rows('stores'))
@while( have_rows('stores')) @php the_row() @endphp
@php
$storeThumb = get_sub_field('store_thumbnail');
@endphp
<div class="store-thumb-container">
<img src="{{$storeThumb}}" class="option-thumbnail" alt="" />
</div>
@endwhile
@endif
</div>
@endif
<div class="section-with-border social-icons">
<p class="drawer-option-headers">Share this Product!</p>
<div class="icon-container">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
</div>
<div class="icon-container">
<a href="#">
<i class="fab fa-twitter"></i>
</a>
</div>
<div class="icon-container">
<a href="#">
<i class="fab fa-pinterest"></i>
</a>
</div>
<div class="icon-container">
<a href="#">
<i class="fa fa-envelope"></i>
</a>
</div>
</div>
<div class="product-desc">
<input id="show-more" type="checkbox">
<label class="show-lbl" for="show-more"></label>
<div class="panel">
{!! $drawerProductDesc !!}
</div>
<div class="fade"></div>
</div>
</div>
</div>
</div>
</div>
@endwhile
@endif
jquery html css
asked Jan 3 at 14:55
Dejsa CocanDejsa Cocan
7341932
I have something setup right now that's close to what I'm working on: https://codepen.io/gojiHime/pen/EGQNNJ
What I want to do is, when clicking "expand" for any of the blocks, I want the "drawer" (which has a red border) to open so that it fills up the space below the entire row and pushes the next row down but never goes past the max-width of the page content which is 1080px.
For what I'm working on, the content is populated with a loop through data that's all connected. I tried having a separate area for the content blocks and a separate area for the drawers, but the drawers would always open below all the rows and not under the current row (if that makes sense).
I did something like this years ago but can't remember nor does the example exist anymore, but it's possible somehow.
Here is the jQuery I have setup, although, I don't think this is a jQuery issue but more of a CSS/HTML issue but I could be wrong.
$("a").each(function() {
$(this).on("click", function(e) {
e.preventDefault();
let drawers = $(".drawer");
drawers.slideUp();
let drawer = $(this).parent().next().slideToggle();
});
});
In case it helps, this is the code from the blade template from the project I'm working on that gets the information needed:
@if(have_rows('product_info'))
@while( have_rows('product_info')) @php the_row() @endphp
@php
$productName = get_sub_field('product_name');
$productSublabel = get_sub_field('product_sublabel');
$productBlueTxt = get_sub_field('blue_label_text');
$productSummary = get_sub_field('product_summary');
$productImg = get_sub_field('product_thumbnail');
$productHashId = get_sub_field('product_hash');
$drawerProductName = get_sub_field('drawer_product_name');
$drawerProductDesc = get_sub_field('drawer_product_description');
$gallery = get_sub_field('drawer_gallery');
$styleHeader = get_sub_field('style_options_header');
$colorsHeader = get_sub_field('color_options_header');
$storesHeader = get_sub_field('availability_header');
@endphp
<div class="product-content">
<div class="product-block">
<div class="image-label-group">
<img class="product-photo" src="{{ $productImg }}" alt="product image"/>
@if($productBlueTxt)
<p class="prod-blue-label">{{ $productBlueTxt }}</p>
@endif
</div>
<div class="product-info-group">
<p class="product-label">{{ $productName }}</p>
@if($productSublabel)
<p class="prod-sublabel">{{ $productSublabel }}</p>
@endif
<div class="prod-summary">{!! $productSummary !!}</div>
<a class="explore-btn" href="#">Explore</a>
</div>
</div>
<div class="product-drawer">
<div class="product-drawer-inner">
<img class="close-drawer" src="@asset('images/Icon-CloseButton.svg')" alt="" />
@if($gallery)
<div class="gallery-container">
@foreach($gallery as $image)
<div class="gallery-item">
<a href="{{ $image['sizes']['large'] }}">
<img src="{{ $image['sizes']['thumbnail'] }}" alt=""/></a>
</div>
@endforeach
</div>
@endif
<div class="product-features">
<p id="drawer-prod-name">{{ $drawerProductName }}</p>
@if($styleHeader)
<div class="section-with-border">
<p id="style-header" class="drawer-option-headers">{{ $styleHeader }}</p>
@if(have_rows('style_options'))
@while( have_rows('style_options')) @php the_row() @endphp
@php
$styleThumb = get_sub_field('style_thumbnail');
@endphp
<img src="{{$styleThumb}}" class="option-thumbnail" alt=""/>
@endwhile
@endif
</div>
@endif
@if($colorsHeader)
<div class="section-with-border">
<p class="color-header drawer-option-headers">{{ $colorsHeader }}</p>
@if(have_rows('colors'))
@while( have_rows('colors')) @php the_row() @endphp
@php
$colorVal = get_sub_field('color_value');
$colorLbl = get_sub_field('color_label');
@endphp
<div class="color-option-container">
<div style="background-color: {!! $colorVal !!};" class="option-thumbnail"></div>
<p class="color-label">{{$colorLbl}}</p>
</div>
@endwhile
@endif
</div>
@endif
@if($storesHeader)
<div class="stores-container">
<p class="stores-header drawer-option-headers">{{ $storesHeader }}</p>
@if(have_rows('stores'))
@while( have_rows('stores')) @php the_row() @endphp
@php
$storeThumb = get_sub_field('store_thumbnail');
@endphp
<div class="store-thumb-container">
<img src="{{$storeThumb}}" class="option-thumbnail" alt="" />
</div>
@endwhile
@endif
</div>
@endif
<div class="section-with-border social-icons">
<p class="drawer-option-headers">Share this Product!</p>
<div class="icon-container">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
</div>
<div class="icon-container">
<a href="#">
<i class="fab fa-twitter"></i>
</a>
</div>
<div class="icon-container">
<a href="#">
<i class="fab fa-pinterest"></i>
</a>
</div>
<div class="icon-container">
<a href="#">
<i class="fa fa-envelope"></i>
</a>
</div>
</div>
<div class="product-desc">
<input id="show-more" type="checkbox">
<label class="show-lbl" for="show-more"></label>
<div class="panel">
{!! $drawerProductDesc !!}
</div>
<div class="fade"></div>
</div>
</div>
</div>
</div>
</div>
@endwhile
@endif
jquery html css
jquery html css
asked Jan 3 at 14:55
Dejsa CocanDejsa Cocan
7341932
asked Jan 3 at 14:55
Dejsa CocanDejsa Cocan
7341932
asked Jan 3 at 14:55
Dejsa CocanDejsa Cocan
7341932
asked Jan 3 at 14:55
Dejsa CocanDejsa Cocan
7341932
asked Jan 3 at 14:55
Dejsa CocanDejsa Cocan
7341932
7341932
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024733%2fopen-content-in-drawer-that-expands-past-the-width-of-containing-div-but-never-g%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024733%2fopen-content-in-drawer-that-expands-past-the-width-of-containing-div-but-never-g%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
