docbrown/app/views/users/_integrations.html.erb
Dan Ott 544fa8d33e
Fixing gap property for all occurrences of flex to work in Safari (#12667)
* Use grid instead of flex

* Use child margin instead of flex gap

* use .grid instead of .flex.flex-column

* Missed one conditional flex gap

* gap-2 safely deleted since there’s only one element

* Add class for crayons-btn-actions

This pattern occurs pretty often. Easy class addition and easy swap out once flex gap is supported in target browsers

* Use crayons-btn-actions

* Adjust styling to use negative margins

* apply crayons-btn-actions

* use margin-right instead of gap

* use .grid instead of .flex.flex-column

* use margin instead of gap for indicators/tooltips in headings

* remove unused class for clarity

* use flex and add margin to small element

* remove gap from flex container and add margin to figure

* crayons-article__main has neither flex nor grid thus gap has no effect

* fix typo

* use actual grid columns

* use gap instead of flex-column

* Apply crayons-btn-actions

* Fix modal window display

* Safari bein a real pain here

Apparently Safari uses a different model to calculate height than other browsers. who knew.
2021-02-17 11:40:38 +01:00

23 lines
1.1 KiB
Text

<div class="crayons-card crayons-card--content-rows">
<h2 class="crayons-subtitle-1">
Generate a personal blog from your <%= community_name %> posts
</h2>
<div class="single-app-integration">
<% if current_user.decorate.stackbit_integration? %>
<h3>Connected to Stackbit <sup>beta</sup><img width="20px" style="margin-left:2px;" src="<%= asset_path("checkmark-green.svg") %>" /></h3>
<p style="font-size: 1.1em"><strong><a href="https://app.stackbit.com/dashboard">Go To Your Stackbit Dashboard</a></strong></p>
<p style="font-size: 1.1em"><strong><a href="https://app.stackbit.com/create?ref=devto">Create New Stackbit Site</a></strong></p>
<% else %>
<h3 class="crayons-subtitle-2 flex items-center">
Connect to Stackbit
<span class="ml-2 crayons-indicator crayons-indicator--accent">beta</span>
</h3>
<p class="mb-4">
Automatically generate a self-hosted static blog feed from your <%= community_name %> posts.
</p>
<a href="/connecting-with-stackbit" class="crayons-btn">
Get Started
</a>
<% end %>
</div>
</div>