Skip to content

Commit 2f3e031

Browse files
hmillersarahhmillersarah
committed
TM page TM section changes
1 parent a23aa64 commit 2f3e031

5 files changed

Lines changed: 129 additions & 98 deletions

File tree

‎ims-tm.html‎

Lines changed: 50 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
<link href="wp-includes/css/grid-fluid.css" rel="stylesheet">
4646
<link href="wp-includes/css/tables.css" rel="stylesheet">
4747
<link href="wp-includes/css/pages/tm.css" rel="stylesheet">
48+
<link href="wp-includes/css/flex.css" rel="stylesheet">
4849

4950
<!-- Hotjar Tracking Code for ibm.com/demos & githhub -->
5051
<script>
@@ -357,104 +358,62 @@ <h4>Fundamentals of IMS TM Part 2</h4>
357358
</div>
358359
</section>
359360

360-
<!-- =========================== Speedy transactions =========================== -->
361-
<!-- <section class="zs-gray-section st-section">
362-
<div class="zs-section">
363-
<div class="pure-u-1 pure-u-sm-1">
364-
<h2>Speedy transactions</h2>
365-
</div>
366-
<div class="pure-u-1 pure-u-sm-1">
367-
<p>Let's say you want to withdraw money from your bank account. How does IMS TM help to do that?</p>
368-
<div class="pure-g">
369-
<div class="pure-u-md-1-24">
370-
<h1>1</h1>
371-
</div>
372-
<div class="pure-u-1 pure-u-lg-10-24 step-c">
373-
<p>TM receives a request for work to be done, such as withdraw money from a bank account.</p>
374-
</div>
375-
376-
<div class="pure-u-md-1-24">
377-
<h1>2</h1>
378-
</div>
379-
<div class="pure-u-1 pure-u-lg-10-24 step-c">
380-
<p>TM initiates a specific programming running in a dependent region (as shown in green) that uses the information in the request to complete the work that was requested.</p>
361+
<!-- =========================== IMS Transaction Manager =========================== -->
362+
<section class="zs-gray-section">
363+
<div class="flex-container tm-section">
364+
<h3>IMS Transaction Manager</h3>
365+
<div class="flex-row">
366+
<div class="flex-block">
367+
<img class="ims-card-icon" src="wp-content/tcp-ip-service.svg" alt="">
368+
<div>
369+
<h3>Speedy transactions</h3>
370+
<p>
371+
The IMS Transaction Manager receives messages from any platform, usually via TCP/IP through IMS Connect,
372+
puts them on the message queue where an application program can retrieve it.
373+
</p>
374+
<p>
375+
Think about getting money from an ATM or bank. The bank uses IMS DB to store customer data and IMS TM to
376+
quickly process deposits, withdrawals, and queries.
377+
</p>
378+
<a href="https://www.ibm.com/docs/en/ims/15.5.0?topic=network-ims-tm-overview"
379+
target="_blank" rel="noopener noreferrer" aria-label="Learn more about IMS TM speedy transactions">Learn more →</a>
381380
</div>
382381
</div>
383-
384-
<div class="pure-g">
385-
<div class="pure-u-md-1-24">
386-
<h1>3</h1>
387-
</div>
388-
<div class="pure-u-1 pure-u-lg-10-24 step-c">
389-
<p>TM prepares a response to the request (for example, "I'm done processing this request").</p>
390-
</div>
391-
392-
<div class="pure-u-md-1-24">
393-
<h1>4</h1>
394-
</div>
395-
<div class="pure-u-1 pure-u-lg-10-24 step-c">
396-
<p>TM transmits the data prepared by the program back to the user that originally requested the work. In other words, the user sees their bank balance.</p>
397-
</div>
382+
<div class="flex-block">
383+
<img src="wp-content/tm/speedy-transactions-c.png" alt="Diagram of IMS TM transaction processing" class="tm-img">
398384
</div>
399385
</div>
400-
</div>
401-
</section> -->
402-
403-
<!-- =========================== Benefits =========================== -->
404-
<section class="zs-gray-section benefits-section">
405-
<div class="zs-section">
406-
<div class="pure-u-1">
407-
<div class="pure-g">
408-
<!-- Speedy transaction -->
409-
<div class="pure-u-1-3">
410-
<div class="pure-u-3-4">
411-
<h3>Speedy transactions</h3>
412-
<p>
413-
The IMS Transaction Manager receives messages from any platform, usually via TCP/IP through IMS Connect,
414-
puts them on the message queue where an application program can retrieve it.
415-
</p>
416-
<p>
417-
Think about getting money from an ATM or bank. The bank uses IMS DB to store customer data and IMS TM to
418-
quickly process deposits, withdrawals, and queries.
419-
</p>
420-
<img src="wp-content/tm/speedy-transactions-c.png" alt="Diagram of IMS TM transaction processing">
421-
<br>
422-
<a href="https://www.ibm.com/docs/en/ims/15.5.0?topic=network-ims-tm-overview"
423-
target="_blank" rel="noopener noreferrer" aria-label="Learn more about IMS TM speedy transactions">Learn more →</a>
424-
</div>
425-
</div>
426-
<!-- Ways to work -->
427-
<div class="pure-u-1-3">
428-
<div class="pure-u-3-4">
429-
<h3>Ways to work</h3>
430-
<p>
431-
Use Red Hat® Ansible® and Red Hat® OpenShift® through digitally transformed ways of working, developing,
432-
and updating critical data-driven applications.
433-
</p>
434-
<p>
435-
The Ansible® for IBM Z® product offers lots of use cases, capabilities, and tools to automate functions of IMS,
436-
such as DBRC administration or IMS catalog management, all by using scripted Ansible playbooks.
437-
</p>
438-
<img src="wp-content/tm/ways-to-work.png" alt="Customers in line">
439-
<br>
440-
<a href="https://imsdev.github.io/ims-devops.html"
386+
<div class="flex-row">
387+
<div class="flex-block">
388+
<img class="ims-card-icon" src="wp-content/ansible-logo.svg" alt="">
389+
<div>
390+
<h3>Ways to work</h3>
391+
<p>
392+
Use Red Hat® Ansible® and Red Hat® OpenShift® through digitally transformed ways of working, developing,
393+
and updating critical data-driven applications.
394+
</p>
395+
<p>
396+
The Ansible® for IBM Z® product offers lots of use cases, capabilities, and tools to automate functions of IMS,
397+
such as DBRC administration or IMS catalog management, all by using scripted Ansible playbooks.
398+
</p>
399+
<a href="https://imsdev.github.io/ims-devops.html"
441400
target="_blank" rel="noopener noreferrer" aria-label="Learn more about ways to work with IMS TM">Learn more →</a>
442-
</div>
443401
</div>
444-
<!-- Ways to connect -->
445-
<div class="pure-u-1-3">
446-
<div class="pure-u-3-4">
447-
<h3>Ways to connect</h3>
448-
<p>Take advantage of not just TCP/IP but RESTful APIs that access IMS™ applications and data in minutes.
449-
Transactions might be issued from z/OS environments or distributed applications that use TCP/IP to communicate
450-
with IMS. Use IMS Connect to provide high performance TCP/IP communications between multiple IMS Connect
451-
clients and IMS systems.
452-
</p>
453-
<img src="wp-content/tm/ways-to-connect.png" alt="Diagram of IMS application ecosystem">
454-
<br>
455-
<a href="https://imsdev.github.io/ims-apis.html"
402+
</div>
403+
<div class="flex-block">
404+
<img class="ims-card-icon" src="wp-content/Icon_Homepage_APIs.svg" alt="">
405+
<div>
406+
<h3>Ways to connect</h3>
407+
<p>Take advantage of not just TCP/IP but RESTful APIs that access IMS™ applications and data in minutes.
408+
Transactions might be issued from z/OS environments or distributed applications that use TCP/IP to communicate
409+
with IMS.
410+
</p>
411+
<p>
412+
Use IMS Connect to provide high performance TCP/IP communications between multiple IMS Connect
413+
clients and IMS systems.
414+
</p>
415+
<a href="https://imsdev.github.io/ims-apis.html"
456416
target="_blank" rel="noopener noreferrer" aria-label="Learn more about how to connect to IMS TM">Learn more →</a>
457-
</div>
458417
</div>
459418
</div>
460419
</div>

‎wp-content/ansible-logo.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎wp-content/tcp-ip-service.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎wp-includes/css/flex.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/* TM page: IMS Transaction Manager section */
2+
.flex-container {
3+
display: flex;
4+
flex-flow: column nowrap;
5+
gap: 2.4em;
6+
margin: 2em 4.4em;
7+
}
8+
9+
.flex-row {
10+
display: flex;
11+
flex-flow: row wrap;
12+
gap: 2.4em;
13+
}
14+
15+
.flex-block {
16+
display: flex;
17+
flex-flow: row nowrap;
18+
align-items: self-start;
19+
gap: 4%;
20+
width: 46%;
21+
}
22+
23+
.flex-block p, a {
24+
font-size: 14pt;
25+
}
26+
27+
.flex-img {
28+
width: 100%;
29+
max-width: 550px;
30+
padding: 1em;
31+
}
32+
33+
/* MEDIA QUERIES */
34+
@media screen and (max-width: 768px) {
35+
.flex-block {
36+
width: 100%;
37+
}
38+
}

‎wp-includes/css/pages/tm.css‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,18 @@
6565
max-width: 590px !important;
6666
}
6767

68+
/* TRANSACTION MANAGER SECTION */
69+
70+
.tm-section h3 {
71+
color: black;
72+
}
73+
74+
.tm-img {
75+
width: 100%;
76+
max-width: 550px;
77+
padding: 1em;
78+
}
79+
6880
/* SPEEDY TRANSACTIONS SECTION */
6981

7082
.st-section h1 {
@@ -167,10 +179,3 @@
167179
font-size: 18px;
168180
}
169181

170-
/* MEDIA QUERIES */
171-
172-
@media screen and (max-width: 1024px) {
173-
.benefits-section img {
174-
width: 200px;
175-
}
176-
}

0 commit comments

Comments
 (0)