Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FP-1410: Shrink Guide Images & Add Links to Open in New Tab #462

Merged
merged 2 commits into from
Mar 11, 2022
Merged

FP-1410: Shrink Guide Images & Add Links to Open in New Tab #462

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb26389
FP-1410: Shrink Images & Open in New Window
wesleyboar Mar 10, 2022
49ac733
FP-1410: Add helpful comment
wesleyboar Mar 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 3 additions & 11 deletions taccsite_cms/static/site_cms/css/src/_imports/trumps/s-document.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,6 @@ Styleguide Trumps.Scopes.Document
blockquote { width: 600px; }
}

.s-document figure {
display: flex;
flex-direction: column;
align-items: center;
}
.s-document figcaption {
font-weight: bold;
}

wesleyboar marked this conversation as resolved.
Show resolved Hide resolved
/* Treat nested definition lists like other nested lists */
/* NOTE: See `../elments/html-elements.html` for `dl dl` reference styles */
p + dl.small {
Expand Down Expand Up @@ -87,9 +78,10 @@ p + dl.small {
/* ELEMENTS: Image & Multimedia */

/* NOTE: The `data_transfer.html` template uses <figure>'s */
.s-document img/*:not(figure > img)*/ {
.s-document img {
wesleyboar marked this conversation as resolved.
Show resolved Hide resolved
display: block;
max-width: 75%;
width: 100%;
max-width: 800px;

border: var(--global-border--normal);
}
Expand Down
51 changes: 40 additions & 11 deletions taccsite_cms/templates/guides/data_transfer.globus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
{% extends "guide.html" %}

{% block guide %}
{# HACK: New markup (`<figure>`) or some classnames may be better, but new guides/docs are coming, so I'm solving this quick #}
<style>
/* To prevent image link from being as wide as col (even when image is not) */
.col p ~ a {
display: inline-block;
}
</style>
<div class="row">
<div class="col">
<h2>
Expand Down Expand Up @@ -50,7 +57,9 @@ <h3 id="step-1-distinguished-name">
as XSEDE is a CILogon Identity Provider.
</p>

<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/b2/a8/b2a856d2-e079-48f1-8785-dbf758534510/picture1.png__1170x0_q85_subsampling-2_upscale.png" />
<a href="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/b2/a8/b2a856d2-e079-48f1-8785-dbf758534510/picture1.png__1170x0_q85_subsampling-2_upscale.png" target="_blank">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/b2/a8/b2a856d2-e079-48f1-8785-dbf758534510/picture1.png__1170x0_q85_subsampling-2_upscale.png" />
</a>

<p>
After successfully authenticating at your chosen Identity Provider, you are redirected back to CILogon, where you can find your Certificate Subject that you will need to copy and paste in the next step:
Expand All @@ -64,15 +73,19 @@ <h3 id="step-1-distinguished-name">
and select "Account Profile" from the main menu under the "Home" dropdown.
</p>

<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/d9/a7/d9a7c353-416b-44b1-9c16-3014d6308b01/picture2.png__1170x0_q85_subsampling-2_upscale.png" />
<a href="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/d9/a7/d9a7c353-416b-44b1-9c16-3014d6308b01/picture2.png__1170x0_q85_subsampling-2_upscale.png" target="_blank">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/d9/a7/d9a7c353-416b-44b1-9c16-3014d6308b01/picture2.png__1170x0_q85_subsampling-2_upscale.png" />
</a>

<p>
On the left of the page is a list of account actions, select "Manage DNs". You will be presented with a list of the DNs currently associated with your TACC account and a text field to associate a new DN to your account. Enter the Certificate Subject obtained from
<a href="http://CILogon.org" target="_blank">CILogon.org</a>
in the text field. Click the button to "Associate DN". This will associate the new DN with your account. Please note, it may take up to 30 minutes for this change to propagate to all TACC systems.
</p>

<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/06/b0/06b0c288-90cc-4bd0-9650-45d25497bbc5/picture3.png__1170x0_q85_subsampling-2_upscale.png" />
<a href="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/06/b0/06b0c288-90cc-4bd0-9650-45d25497bbc5/picture3.png__1170x0_q85_subsampling-2_upscale.png" target="_blank">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/06/b0/06b0c288-90cc-4bd0-9650-45d25497bbc5/picture3.png__1170x0_q85_subsampling-2_upscale.png" />
</a>
</div>
</div>

Expand All @@ -92,23 +105,31 @@ <h3 id="step-2-globus-endpoint">
and log in.
</p>

<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/64/ec/64ec67d5-29fb-4a8c-84bf-d8e52860083a/picture4.png__1170x0_q85_subsampling-2_upscale.png" />
<a href="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/64/ec/64ec67d5-29fb-4a8c-84bf-d8e52860083a/picture4.png__1170x0_q85_subsampling-2_upscale.png" target="_blank">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/64/ec/64ec67d5-29fb-4a8c-84bf-d8e52860083a/picture4.png__1170x0_q85_subsampling-2_upscale.png" />
</a>

<p>
Upon successful login you, you will be directed to the "File Manager" landing page.
</p>

<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/04/cc/04cc029b-9af8-4cb0-8698-943ae93d9e0e/picture5.png__1170x0_q85_subsampling-2_upscale.png" />
<a href="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/04/cc/04cc029b-9af8-4cb0-8698-943ae93d9e0e/picture5.png__1170x0_q85_subsampling-2_upscale.png" target="_blank">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/04/cc/04cc029b-9af8-4cb0-8698-943ae93d9e0e/picture5.png__1170x0_q85_subsampling-2_upscale.png" />
</a>

<p>Click on Endpoints.</p>

<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/14/a5/14a540bd-9666-449c-be18-ef18456faf42/picture6.png__1170x0_q85_subsampling-2_upscale.png" />
<a href="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/14/a5/14a540bd-9666-449c-be18-ef18456faf42/picture6.png__1170x0_q85_subsampling-2_upscale.png" target="_blank">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/14/a5/14a540bd-9666-449c-be18-ef18456faf42/picture6.png__1170x0_q85_subsampling-2_upscale.png" />
</a>

<p>
Click “+ Create new endpoint” and follow the instructions to set up your desktop/laptop as an endpoint.
</p>

<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/71/94/71947964-5a11-4bb3-ab5e-b8b2ae1b1c86/picture7.png__1170x0_q85_subsampling-2_upscale.png" />
<a href="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/71/94/71947964-5a11-4bb3-ab5e-b8b2ae1b1c86/picture7.png__1170x0_q85_subsampling-2_upscale.png" target="_blank">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/71/94/71947964-5a11-4bb3-ab5e-b8b2ae1b1c86/picture7.png__1170x0_q85_subsampling-2_upscale.png" />
</a>

<p>
Enter a Display Name to identify your local endpoint like My Laptop, My Desktop at Home, etcetera and then click Generate Setup Key and click copy to copy the Personal Setup Key.
Expand All @@ -124,11 +145,15 @@ <h3 id="step-2-globus-endpoint">
Click on “File Manager”, and next click on the Collection field. You can choose "Your collections" and click on "My Laptop" to select the created endpoint to your computer.
</p>

<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/6f/ee/6feecdb0-0abc-4732-85a0-88f3e58a361f/picture8.png__1170x0_q85_subsampling-2_upscale.png" />
<a href="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/6f/ee/6feecdb0-0abc-4732-85a0-88f3e58a361f/picture8.png__1170x0_q85_subsampling-2_upscale.png" target="_blank">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/6f/ee/6feecdb0-0abc-4732-85a0-88f3e58a361f/picture8.png__1170x0_q85_subsampling-2_upscale.png" />
</a>

<p>You can now access the files on your desktop/laptop via Globus.</p>

<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/0f/3d/0f3daa28-6632-4d3e-a964-706d33dc2fa3/picture9.png__1170x0_q85_subsampling-2_upscale.png" />
<a href="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/0f/3d/0f3daa28-6632-4d3e-a964-706d33dc2fa3/picture9.png__1170x0_q85_subsampling-2_upscale.png" target="_blank">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/0f/3d/0f3daa28-6632-4d3e-a964-706d33dc2fa3/picture9.png__1170x0_q85_subsampling-2_upscale.png" />
</a>

<p>
You can also click on Panels to look at two endpoints at the same time. In the other transfer endpoint, search for "TACC" and select the appropriate allocation storage system (Frontera, Stampede2, Corral, Ranch, etcetera) for the desired data.
Expand Down Expand Up @@ -160,7 +185,9 @@ <h3 id="step-2-globus-endpoint">
</dl>
</details>

<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/5b/7a/5b7adb5f-da51-4dd0-9b84-44ce69c41da6/picture10.png__1170x0_q85_subsampling-2_upscale.png" />
<a href="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/5b/7a/5b7adb5f-da51-4dd0-9b84-44ce69c41da6/picture10.png__1170x0_q85_subsampling-2_upscale.png" target="_blank">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/5b/7a/5b7adb5f-da51-4dd0-9b84-44ce69c41da6/picture10.png__1170x0_q85_subsampling-2_upscale.png" />
</a>

<p>
After successfully authenticating, you will be redirected back to Globus and you will now be able to access your data on the allocation storage system (Frontera, Stampede2, Corral, Ranch):
Expand Down Expand Up @@ -221,7 +248,9 @@ <h3 id="step-2-globus-endpoint">
<ul>
<li>
<p>You will find the Project Id on your “My Projects” list in the second column.</p>
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/53/f4/53f40efb-3207-44e8-a84c-59a2a97a9b56/picture11_a2cps.png__1170x0_q85_subsampling-2_upscale.png" />
<a href="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/53/f4/53f40efb-3207-44e8-a84c-59a2a97a9b56/picture11_a2cps.png__1170x0_q85_subsampling-2_upscale.png" target="_blank">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/53/f4/53f40efb-3207-44e8-a84c-59a2a97a9b56/picture11_a2cps.png__1170x0_q85_subsampling-2_upscale.png" />
</a>
</li>
<li>
<p>If you are viewing a project, the Project Id will be appended to the URL in your browser as:
Expand Down
22 changes: 18 additions & 4 deletions taccsite_cms/templates/guides/data_transfer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
{% extends "guide.html" %}

{% block guide %}
<style>
/* To override 800px (from stylesheet) which is too big for these images */
.s-document img {
max-width: 570px;
}
</style>
<div class="row">
<div class="col">
<h2>Data Transfer and Management Guide</h2>
Expand Down Expand Up @@ -208,7 +214,9 @@ <h4 id="local_data_path">
Once you have identified the location of the files, you can right-click on them and select either Get Info (on Mac) or Properties (on Windows) to view the path location on your local system.
</p>
<figure id="figure1">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/6c/ea/6ceacba9-7824-4925-b924-dd317040b629/picture1.png__1170x0_q85_subsampling-2_upscale.png" />
<a href="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/6c/ea/6ceacba9-7824-4925-b924-dd317040b629/picture1.png__1170x0_q85_subsampling-2_upscale.png" target="_blank">
<img style="max-width: 380px;" src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/6c/ea/6ceacba9-7824-4925-b924-dd317040b629/picture1.png__1170x0_q85_subsampling-2_upscale.png" />
</a>
<figcaption>
Figure 1. Use Get Info to determine “Where” the path of your data file(s) is
</figcaption>
Expand Down Expand Up @@ -434,7 +442,9 @@ <h5 id="cy_windows">For Windows</h5>
</p>

<figure id="figure2">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a9/9f/a99fa278-ae07-4b5e-9219-f9db3c2c89d5/picture2.png__1170x0_q85_subsampling-2_upscale.png" />
<a href="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a9/9f/a99fa278-ae07-4b5e-9219-f9db3c2c89d5/picture2.png__1170x0_q85_subsampling-2_upscale.png" target="_blank">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a9/9f/a99fa278-ae07-4b5e-9219-f9db3c2c89d5/picture2.png__1170x0_q85_subsampling-2_upscale.png" />
</a>
<figcaption>
Figure 2. Windows Cyberduck and “Open Connection” setup screen
</figcaption>
Expand All @@ -449,7 +459,9 @@ <h5 id="cy_windows">For Windows</h5>
<em>If you have not done so already, replace the “Path” with the path to your individualized transfer directory.</em>
</p>
<figure id="figure3">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/10/fb/10fbbb2a-dcd8-44d8-9ade-fb4ed3df8487/picture3.png__1170x0_q85_subsampling-2_upscale.png" />
<a href="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/10/fb/10fbbb2a-dcd8-44d8-9ade-fb4ed3df8487/picture3.png__1170x0_q85_subsampling-2_upscale.png" target="_blank">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/10/fb/10fbbb2a-dcd8-44d8-9ade-fb4ed3df8487/picture3.png__1170x0_q85_subsampling-2_upscale.png" />
</a>
<figcaption>
Figure 3. Windows “Open Connection” setup screen
</figcaption>
Expand Down Expand Up @@ -482,7 +494,9 @@ <h5 id="cy_mac">For Mac</h5>
<kbd>host</kbd>. Add your TACC username and password in the spaces provided. If the “More Options” area is not shown, click the small triangle or button to expand the window; this will allow you to enter the path to your transfer directory, <kbd>/transfer/directory/path</kbd>, so that when Cyberduck opens the connection you will immediately be in your individualized transfer directory on the system. As you fill out the information, Cyberduck will create the bookmark for you. Exit out of the setup screen and click on your newly created bookmark to launch the connection.
</p>
<figure id="figure4">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fa/b3/fab3edd6-c7a6-46dc-8103-09917ef02240/picture4.png__1170x0_q85_subsampling-2_upscale.png" />
<a href="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fa/b3/fab3edd6-c7a6-46dc-8103-09917ef02240/picture4.png__1170x0_q85_subsampling-2_upscale.png" target="_blank">
<img src="https://a2cps-staging.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fa/b3/fab3edd6-c7a6-46dc-8103-09917ef02240/picture4.png__1170x0_q85_subsampling-2_upscale.png" />
</a>
<figcaption>Figure 4. macOS “New Bookmark” setup screen</figcaption>
</figure>

Expand Down